:root {
    --primary: #007bff;
    --bg: #f0f2f5;
    --text: #1c1e21;
    --card-bg: #ffffff;
    --border: #dee2e6;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; 
    padding: 0;
    background: var(--bg); 
    color: var(--text); 
}

/* Top Navigation */
.top-nav {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.top-nav h1 { margin: 0; font-size: 1.1rem; flex: 1; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link { text-decoration: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; }

.container { padding: 15px; max-width: 600px; margin: 0 auto; }

.card { 
    background: var(--card-bg); 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    margin-bottom: 15px; 
}

h3 { margin-top: 0; font-size: 1rem; margin-bottom: 15px; color: #65676b; text-transform: uppercase; letter-spacing: 0.5px; }

/* Forms */
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #4b4f56; }
input[type="text"], textarea { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    font-size: 1rem;
    box-sizing: border-box;
    background: #f9fafb;
}
textarea { height: 80px; resize: vertical; }

.btn { 
    width: 100%;
    padding: 12px; 
    border-radius: 8px; 
    border: none; 
    font-weight: 700; 
    cursor: pointer; 
    font-size: 1rem; 
    background: var(--primary);
    color: white;
}

/* Sequence List */
.item-list { margin-top: 10px; }
.item-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px 10px; 
    border-bottom: 1px solid #f0f2f5; 
    align-items: center; 
    background: #fff;
}
.item-row:last-child { border-bottom: none; }

.item-content { display: flex; align-items: center; gap: 10px; flex: 1; }

/* Drag handle specifically for sorting */
.drag-handle { 
    color: #ccc; 
    font-size: 1.2rem; 
    margin-right: 5px; 
    cursor: grab; 
    padding: 5px;
    touch-action: none; 
}
.drag-handle:active { cursor: grabbing; }

.sortable-ghost { opacity: 0.3; background: #e7f3ff !important; border: 2px dashed var(--primary); }

.badge { 
    font-size: 0.65rem; 
    padding: 2px 6px; 
    border-radius: 4px; 
    color: white; 
    text-transform: uppercase; 
    font-weight: 800;
}
.badge-TASK { background: var(--primary); }
.badge-MILESTONE { background: #6f42c1; }

.actions-cell { display: flex; align-items: center; gap: 10px; }

.edit-link {
    text-decoration: none;
    font-size: 1.1rem;
    padding: 5px;
    color: #65676b;
}

.remove-link { 
    background: none; 
    border: none; 
    color: #dc3545; 
    font-weight: 600; 
    font-size: 0.8rem; 
    padding: 5px;
    cursor: pointer; 
}

/* Inline horizontal form for milestone */
.milestone-form { display: flex; gap: 8px; align-items: flex-start; }
.milestone-form input { margin-bottom: 0; }
.milestone-form .btn { width: auto; white-space: nowrap; }