: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; }

/* Stack Metadata Form Styling */
.stack-meta-form {
    flex: 1;
    margin-left: 15px;
    display: flex;
    align-items: center;
}

.input-group-main {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.stack-name-input {
    flex: 2;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 5px 10px;
    color: white;
    outline: none;
    transition: background 0.2s;
}

.stack-name-input:focus {
    background: rgba(255, 255, 255, 0.2);
}

.goal-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.goal-input-wrapper label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #ccc;
    margin-right: 8px;
}

.goal-input {
    width: 50px;
    background: transparent;
    border: none;
    color: #00d1b2; /* A nice highlight color */
    font-weight: bold;
    text-align: right;
    outline: none;
}

.goal-input-wrapper .unit {
    font-size: 0.8rem;
    color: #8d949e;
    margin-left: 3px;
}

.save-meta-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.save-meta-btn:hover {
    background: #0056b3;
}