/* iOS 26 — Liquid Glass UI */

:root {
    --ios-bg: #F2F2F7;
    --ios-bg-elevated: #FFFFFF;
    --ios-bg-grouped: #FFFFFF;
    --ios-separator: rgba(60, 60, 67, 0.12);
    --ios-label: #000000;
    --ios-label-secondary: rgba(60, 60, 67, 0.6);
    --ios-label-tertiary: rgba(60, 60, 67, 0.3);
    --ios-tint: #007AFF;
    --ios-tint-pressed: #0056B3;
    --ios-green: #34C759;
    --ios-orange: #FF9500;
    --ios-red: #FF3B30;
    --ios-yellow: #FFCC00;
    --ios-fill: rgba(120, 120, 128, 0.12);
    --ios-fill-secondary: rgba(120, 120, 128, 0.08);
    --ios-blur: saturate(180%) blur(20px);
    --ios-radius: 12px;
    --ios-radius-lg: 16px;
    --ios-radius-xl: 22px;
    --tabbar-h: 52px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --header-h: auto;
}

[data-theme="dark"] {
    --ios-bg: #000000;
    --ios-bg-elevated: #1C1C1E;
    --ios-bg-grouped: #1C1C1E;
    --ios-separator: rgba(84, 84, 88, 0.65);
    --ios-label: #FFFFFF;
    --ios-label-secondary: rgba(235, 235, 245, 0.6);
    --ios-label-tertiary: rgba(235, 235, 245, 0.3);
    --ios-tint: #0A84FF;
    --ios-fill: rgba(120, 120, 128, 0.24);
    --ios-fill-secondary: rgba(120, 120, 128, 0.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
    background: var(--ios-bg);
    color: var(--ios-label);
    min-height: 100dvh;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.hidden { display: none !important; }

.app-shell {
    max-width: 680px;
    margin: 0 auto;
    min-height: 100dvh;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
}

/* Icons */
.ico { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.ico svg { display: block; }

/* Header — glass */
.ios-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(8px + var(--safe-t)) 16px 12px;
    background: color-mix(in srgb, var(--ios-bg) 72%, transparent);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border-bottom: 0.5px solid var(--ios-separator);
}

.ios-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ios-large-title {
    display: block;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.ios-subtitle {
    font-size: 15px;
    color: var(--ios-label-secondary);
    margin-top: 2px;
}

.ios-header-actions { display: flex; gap: 4px; }

.ios-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--ios-fill);
    color: var(--ios-tint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
}
.ios-icon-btn:active { transform: scale(0.92); opacity: 0.7; }

.ios-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--ios-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search */
.ios-search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.ios-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ios-label-tertiary);
    pointer-events: none;
}
.ios-search {
    width: 100%;
    padding: 10px 36px 10px 38px;
    border: none;
    border-radius: 10px;
    background: var(--ios-fill);
    color: var(--ios-label);
    font-size: 17px;
    outline: none;
}
.ios-search::placeholder { color: var(--ios-label-tertiary); }
.ios-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--ios-fill-secondary);
    color: var(--ios-label-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Segmented control */
.ios-segment {
    display: flex;
    background: var(--ios-fill);
    border-radius: 9px;
    padding: 2px;
    gap: 2px;
}
.ios-segment-btn {
    flex: 1;
    padding: 7px 4px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ios-label);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ios-segment-btn.active {
    background: var(--ios-bg-elevated);
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04);
    font-weight: 600;
}

/* Main */
.ios-main { padding: 0 16px 16px; }
.view-panel { display: none; }
.view-panel.active { display: block; }

/* Stats — minimal pills */
.ios-stats {
    display: flex;
    gap: 8px;
    margin: 16px 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ios-stats::-webkit-scrollbar { display: none; }
.ios-stat {
    flex: 1;
    min-width: 72px;
    text-align: center;
    padding: 10px 8px;
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius);
    border: 0.5px solid var(--ios-separator);
}
.ios-stat span { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.ios-stat label { font-size: 11px; color: var(--ios-label-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.ios-stat.accent span { color: var(--ios-tint); }
.ios-stat.warn span { color: var(--ios-orange); }
.ios-stat.ok span { color: var(--ios-green); }

/* Toolbar */
.ios-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ios-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--ios-fill);
    color: var(--ios-tint);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.ios-select, .ios-select-sm {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: var(--ios-fill);
    color: var(--ios-label);
    font-size: 14px;
    outline: none;
}
.ios-select-sm { font-size: 13px; }
.ios-toggle-sm {
    font-size: 13px;
    color: var(--ios-label-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.ios-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ios-filters .ios-select { flex: 1; min-width: 100px; }

/* List — iOS grouped */
.ios-list, .ios-list-group {
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-lg);
    overflow: hidden;
    border: 0.5px solid var(--ios-separator);
}

.ios-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--ios-separator);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.ios-row:last-child { border-bottom: none; }
.ios-row:active { background: var(--ios-fill-secondary); }
.ios-row.pinned { background: color-mix(in srgb, var(--ios-tint) 6%, transparent); }
.ios-row.is-new {
    background: color-mix(in srgb, var(--ios-tint) 8%, transparent);
    border-left: 3px solid var(--ios-tint);
}
.ios-row.over-estimate,
.ios-row-group.group-over-estimate .ios-row {
    background: color-mix(in srgb, var(--ios-red) 10%, transparent);
    animation: pulse-red 2s ease-in-out infinite;
}
@keyframes pulse-red {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ios-red) 40%, transparent); }
}
.ios-tag.is-new-tag {
    background: color-mix(in srgb, var(--ios-tint) 18%, transparent);
    color: var(--ios-tint);
}
.ios-tag.over-estimate {
    background: color-mix(in srgb, var(--ios-red) 18%, transparent);
    color: var(--ios-red);
    font-weight: 600;
}
.ios-tag.complexity-tag { background: var(--ios-fill); }
.ios-time-bar {
    height: 4px;
    background: var(--ios-fill);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.ios-time-bar-fill {
    height: 100%;
    background: var(--ios-tint);
    border-radius: 2px;
    transition: width 0.3s;
}
.ios-time-bar.over .ios-time-bar-fill { background: var(--ios-red); }

/* Workload */
.ios-workload-board { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ios-workload-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0 12px;
    margin-top: 4px;
}
.ios-workload-mini {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--ios-bg-grouped);
    border-radius: 20px;
    border: 0.5px solid var(--ios-separator);
    font-size: 12px;
    font-weight: 600;
}
.ios-workload-mini.low span:last-child { color: var(--ios-green); }
.ios-workload-mini.mid span:last-child { color: var(--ios-orange); }
.ios-workload-mini.high span:last-child { color: var(--ios-red); }
.ios-workload-mini-bar {
    width: 40px;
    height: 4px;
    background: var(--ios-fill);
    border-radius: 2px;
    overflow: hidden;
}
.ios-workload-mini-bar > div { height: 100%; border-radius: 2px; }
.ios-workload-mini.low .ios-workload-mini-bar > div { background: var(--ios-green); }
.ios-workload-mini.mid .ios-workload-mini-bar > div { background: var(--ios-orange); }
.ios-workload-mini.high .ios-workload-mini-bar > div { background: var(--ios-red); }
.ios-avatar.xs { width: 24px; height: 24px; font-size: 11px; }
.ios-workload-card {
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-lg);
    padding: 14px 16px;
    border: 0.5px solid var(--ios-separator);
}
.ios-workload-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ios-workload-info { flex: 1; min-width: 0; }
.ios-workload-info strong { display: block; font-size: 15px; }
.ios-workload-info span { font-size: 13px; color: var(--ios-label-secondary); }
.ios-workload-pct { font-size: 17px; font-weight: 700; }
.ios-workload-pct.low { color: var(--ios-green); }
.ios-workload-pct.mid { color: var(--ios-orange); }
.ios-workload-pct.high { color: var(--ios-red); }
.ios-workload-bar {
    height: 6px;
    background: var(--ios-fill);
    border-radius: 3px;
    overflow: hidden;
}
.ios-workload-bar > div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s;
}
.ios-workload-bar.low > div { background: var(--ios-green); }
.ios-workload-bar.mid > div { background: var(--ios-orange); }
.ios-workload-bar.high > div { background: var(--ios-red); }
.ios-workload-warn {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ios-red);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ios-avatar.sm { width: 32px; height: 32px; font-size: 14px; }
.ios-suggest-score {
    font-size: 14px;
    color: var(--ios-label-secondary);
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--ios-fill-secondary);
    border-radius: 10px;
}
.ios-rating-btn.suggested { border: 2px solid var(--ios-tint); }
.ios-kanban-card.is-new { border-left: 3px solid var(--ios-tint); }
.ios-kanban-card.over-estimate { background: color-mix(in srgb, var(--ios-red) 12%, var(--ios-fill-secondary)); }

/* Priority system */
.ios-priority-alert {
    margin: 8px 0 12px;
    padding: 12px 14px;
    border-radius: var(--ios-radius-lg);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ios-priority-alert.critical {
    background: color-mix(in srgb, var(--ios-red) 15%, transparent);
    color: var(--ios-red);
    border: 1px solid color-mix(in srgb, var(--ios-red) 35%, transparent);
    animation: pulse-red 2s ease-in-out infinite;
}
.ios-priority-alert.warn {
    background: color-mix(in srgb, var(--ios-orange) 12%, transparent);
    color: var(--ios-orange);
    border: 1px solid color-mix(in srgb, var(--ios-orange) 30%, transparent);
}
.ios-row.priority-critical-active {
    border-left: 3px solid var(--ios-red);
    background: color-mix(in srgb, var(--ios-red) 8%, transparent);
}
.ios-row.priority-deferred {
    opacity: 0.72;
    border-left: 3px solid var(--ios-orange);
}
.ios-tag.critical-tag {
    background: color-mix(in srgb, var(--ios-red) 20%, transparent);
    color: var(--ios-red);
    font-weight: 700;
}
.ios-tag.deferred-tag {
    background: color-mix(in srgb, var(--ios-orange) 18%, transparent);
    color: var(--ios-orange);
}
.ios-tag.pool-tag {
    background: color-mix(in srgb, var(--ios-purple) 15%, transparent);
    color: var(--ios-purple);
    font-weight: 600;
}
.ios-form-hint {
    font-size: 12px;
    color: var(--ios-label-tertiary);
    margin-top: 6px;
}
.ios-row-group.group-critical .ios-row { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ios-red) 25%, transparent); }

.ios-row-status {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ios-row-body { flex: 1; min-width: 0; }
.ios-row-title {
    font-size: 17px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ios-row-sub {
    font-size: 14px;
    color: var(--ios-label-secondary);
    margin-top: 2px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ios-row-chevron { color: var(--ios-label-tertiary); flex-shrink: 0; }

.ios-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ios-fill);
    color: var(--ios-label-secondary);
    font-weight: 500;
}
.ios-tag.overdue { background: color-mix(in srgb, var(--ios-red) 15%, transparent); color: var(--ios-red); }
.ios-tag.priority-critical { color: var(--ios-red); }
.ios-tag.priority-high { color: var(--ios-orange); }

.ios-row-group {
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
    border: 0.5px solid var(--ios-separator);
}
.ios-row-group .ios-row { border-radius: 0; border: none; }
.ios-row-group .ios-row-actions { border-bottom: none; }

.ios-row-actions {
    display: flex;
    gap: 6px;
    padding: 8px 16px 12px;
    border-bottom: 0.5px solid var(--ios-separator);
    overflow-x: auto;
}
.ios-chip-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background: var(--ios-fill);
    color: var(--ios-label);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ios-chip-btn.active { background: var(--ios-tint); color: #fff; }
.ios-chip-btn:active { opacity: 0.7; }

.ios-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 16px 0 8px 4px;
}

/* Empty */
.ios-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ios-label-secondary);
}
.ios-empty .ico { color: var(--ios-label-tertiary); margin-bottom: 12px; }
.ios-empty p { font-size: 17px; }

/* Kanban */
.ios-kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-top: 16px;
}
.ios-kanban-col {
    flex: 0 0 260px;
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-lg);
    border: 0.5px solid var(--ios-separator);
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
}
.ios-kanban-head {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 0.5px solid var(--ios-separator);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}
.ios-kanban-cards { padding: 8px; overflow-y: auto; flex: 1; }
.ios-kanban-card {
    padding: 12px;
    background: var(--ios-fill-secondary);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 15px;
}
.ios-kanban-card:active { opacity: 0.7; }

/* Hero card (rating) */
.ios-hero-card {
    margin-top: 16px;
    padding: 20px;
    border-radius: var(--ios-radius-xl);
    background: linear-gradient(135deg, var(--ios-tint), #5856D6);
    color: #fff;
    margin-bottom: 16px;
}
.ios-hero-points { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; }
.ios-hero-meta { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; opacity: 0.9; }

/* Team */
.ios-team-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ios-team-card {
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-lg);
    padding: 16px;
    border: 0.5px solid var(--ios-separator);
}
.ios-team-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ios-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 16px;
}
.ios-team-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; text-align: center; }
.ios-team-stats span { display: block; font-size: 18px; font-weight: 700; }
.ios-team-stats label { font-size: 11px; color: var(--ios-label-secondary); }

/* Leaderboard row */
.lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--ios-separator);
}
.lb-rank { width: 28px; display: flex; justify-content: center; }
.lb-points { font-weight: 700; color: var(--ios-tint); font-size: 17px; }

/* Tab bar — glass */
.ios-tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: center;
    padding-bottom: var(--safe-b);
    background: color-mix(in srgb, var(--ios-bg) 80%, transparent);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border-top: 0.5px solid var(--ios-separator);
    z-index: 200;
}
.ios-tabbar .ios-tab { max-width: 120px; }
.ios-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 4px;
    border: none;
    background: none;
    color: var(--ios-label-secondary);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
}
.ios-tab.active { color: var(--ios-tint); }
.ios-tab .ico { opacity: 0.8; }
.ios-tab.active .ico { opacity: 1; }

/* FAB */
.ios-fab {
    position: fixed;
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
    right: 20px;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--ios-tint);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ios-tint) 40%, transparent);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
    transition: transform 0.15s;
}
.ios-fab:active { transform: scale(0.9); }

/* Sheet modal */
.ios-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s;
}
.ios-sheet {
    width: 100%;
    max-width: 680px;
    max-height: 92dvh;
    background: var(--ios-bg-elevated);
    border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0;
    display: flex;
    flex-direction: column;
    animation: sheetUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.ios-sheet-tall { max-height: 95dvh; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.ios-sheet-handle {
    width: 36px; height: 5px;
    background: var(--ios-label-tertiary);
    border-radius: 3px;
    margin: 8px auto 4px;
}
.ios-sheet-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 0 8px 12px;
    border-bottom: 0.5px solid var(--ios-separator);
}
.ios-sheet-header h2 { font-size: 17px; font-weight: 600; text-align: center; }
.ios-sheet-close, .ios-sheet-action {
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: var(--ios-fill);
    color: var(--ios-label-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.ios-sheet-action { color: var(--ios-tint); }
.ios-text-btn {
    border: none; background: none;
    color: var(--ios-tint); font-size: 15px;
    cursor: pointer; justify-self: end; padding: 8px;
}
.ios-sheet-body { overflow-y: auto; padding: 16px; flex: 1; -webkit-overflow-scrolling: touch; }

/* Form */
.ios-form-group { margin-bottom: 16px; }
.ios-form-group label {
    display: block; font-size: 13px;
    color: var(--ios-label-secondary);
    margin-bottom: 6px; font-weight: 500;
}
.ios-form-group input, .ios-form-group select, .ios-form-group textarea {
    width: 100%; padding: 12px 14px;
    border: none; border-radius: 10px;
    background: var(--ios-fill);
    color: var(--ios-label); font-size: 17px; outline: none;
    font-family: inherit;
}
.ios-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ios-btn-primary {
    width: 100%; padding: 14px;
    border: none; border-radius: 12px;
    background: var(--ios-tint); color: #fff;
    font-size: 17px; font-weight: 600;
    cursor: pointer; margin-top: 8px;
}
.ios-btn-primary:active { opacity: 0.8; }

/* Detail sections */
.ios-detail-section { margin-bottom: 20px; }
.ios-detail-section h4 {
    font-size: 13px; font-weight: 600;
    color: var(--ios-label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.ios-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ios-detail-cell {
    padding: 10px 12px;
    background: var(--ios-fill-secondary);
    border-radius: 10px;
    font-size: 14px;
}
.ios-detail-cell label { display: block; font-size: 11px; color: var(--ios-label-tertiary); margin-bottom: 2px; }

.ios-status-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ios-status-pill {
    padding: 8px 14px;
    border: none; border-radius: 20px;
    background: var(--ios-fill);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.ios-status-pill.active { background: var(--ios-tint); color: #fff; }

.ios-comment {
    padding: 10px 0;
    border-bottom: 0.5px solid var(--ios-separator);
    font-size: 15px;
}
.ios-comment-author { font-size: 13px; font-weight: 600; color: var(--ios-tint); }
.ios-comment-time { font-size: 12px; color: var(--ios-label-tertiary); font-weight: 400; }

.ios-comment-form {
    display: flex; gap: 8px; margin-top: 12px;
}
.ios-comment-form input {
    flex: 1; padding: 10px 14px;
    border: none; border-radius: 20px;
    background: var(--ios-fill);
    font-size: 16px; outline: none;
}

.ios-rating-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ios-rating-btn {
    padding: 10px 14px;
    border: none; border-radius: 10px;
    background: var(--ios-fill);
    cursor: pointer;
    display: flex; gap: 2px;
    color: var(--ios-orange);
}
.ios-rating-btn:active { background: var(--ios-tint); color: #fff; }

.ios-activity-row {
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--ios-separator);
    font-size: 14px;
    color: var(--ios-label-secondary);
}
.ios-activity-row strong { color: var(--ios-label); }

.ios-notif-row {
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--ios-separator);
    font-size: 15px;
    cursor: pointer;
}
.ios-notif-row.unread { background: color-mix(in srgb, var(--ios-tint) 8%, transparent); }
.ios-notif-row.notif-critical {
    border-left: 3px solid var(--ios-red);
    background: color-mix(in srgb, var(--ios-red) 10%, transparent);
}
.ios-notif-row.notif-warn {
    border-left: 3px solid var(--ios-orange);
    background: color-mix(in srgb, var(--ios-orange) 8%, transparent);
}
.ios-kanban-card.priority-critical-active {
    border-left: 3px solid var(--ios-red);
    background: color-mix(in srgb, var(--ios-red) 8%, var(--ios-fill-secondary));
}
.ios-kanban-card.priority-deferred { opacity: 0.75; border-left: 3px solid var(--ios-orange); }
.ios-notif-time { font-size: 13px; color: var(--ios-label-tertiary); margin-top: 4px; }

/* Toast */
.ios-toast {
    position: fixed;
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 80px);
    left: 50%; transform: translateX(-50%);
    padding: 12px 20px;
    background: color-mix(in srgb, var(--ios-label) 90%, transparent);
    color: var(--ios-bg);
    border-radius: 20px;
    font-size: 15px; font-weight: 500;
    z-index: 400;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
.ios-toast.show { display: block; animation: toastIn 0.3s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* Loader */
.ios-loader {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--ios-bg) 60%, transparent);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
}
.ios-loader::after {
    content: '';
    width: 32px; height: 32px;
    border: 3px solid var(--ios-fill);
    border-top-color: var(--ios-tint);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--ios-fill) 25%, var(--ios-fill-secondary) 50%, var(--ios-fill) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 8px;
    height: 60px;
    margin-bottom: 1px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Login */
body.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; padding: 24px;
    background: var(--ios-bg);
}
.login-wrap { width: 100%; max-width: 380px; }
.login-brand { text-align: center; margin-bottom: 32px; }
.login-brand .ico { color: var(--ios-tint); margin-bottom: 12px; }
.login-brand h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.login-brand p { color: var(--ios-label-secondary); margin-top: 4px; }
.login-card {
    background: var(--ios-bg-grouped);
    border-radius: var(--ios-radius-xl);
    padding: 24px;
    border: 0.5px solid var(--ios-separator);
}
.error-msg {
    color: var(--ios-red); font-size: 14px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ios-red) 10%, transparent);
    border-radius: 8px; margin-bottom: 12px;
}

.desktop-only { display: none; }
@media (min-width: 768px) {
    .desktop-only { display: flex; }
    .ios-fab { right: calc(50% - 340px + 20px); }
    .ios-tabbar { max-width: 680px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
}

@media (min-width: 1024px) {
    .ios-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

.ios-search-inline {
    flex: 1; padding: 8px 12px;
    border: none; border-radius: 8px;
    background: var(--ios-fill);
    font-size: 15px; outline: none;
}