@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --bg:#14100d; --surface:#211b15; --surface-2:#2a231b; --surface-3:#372e24; --line:#493d31; --line-soft:#3d3329; --text:#fbf9f6; --muted:#beb2a3; --purple:#ceb798; --purple-2:#d0b39a; --cyan:#b99a73; --pink:#d9c2ad; --green:#aeb389; --danger:#d6a79a; --shadow:0 18px 48px rgba(0,0,0,.3); font-family:Manrope,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 74% -10%,rgba(179,151,116,.15),transparent 30rem),var(--bg); }
button,input,textarea { font:inherit; } button { color:inherit; cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.icon { flex:none; vertical-align:middle; } .eyebrow { color:var(--cyan); letter-spacing:.14em; font-size:10px; font-weight:800; margin:0 0 9px; }
.primary-button,.ghost-button,.dark-button,.text-button,.small-primary,.tool-button,.fit-button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.primary-button { background:linear-gradient(120deg,var(--purple),#c3a681 45%,var(--pink)); padding:13px 18px; border-radius:12px; box-shadow:0 8px 20px rgba(196,167,129,.28); } .primary-button:hover { transform:translateY(-2px); } .primary-button.compact { padding:9px 12px; font-size:12px; } .primary-button.full { width:100%; margin-top:22px; }
.ghost-button { border:1px solid var(--line); background:rgba(48,40,31,.65); padding:12px 16px; border-radius:12px; } .ghost-button:hover { border-color:#a28f78; background:var(--surface-2); }
.dark-button { background:#1b1712; border:1px solid rgba(219,202,179,.28); padding:10px 11px; border-radius:10px; font-size:12px; width:100%; }
.text-button { padding:8px 0; color:#e5ddd2; background:transparent; font-size:12px; }.text-button:hover { color:var(--cyan); }.icon-button,.more-button,.modal-close,.track-control,.transport-button { display:inline-grid; place-items:center; padding:0; border:0; background:transparent; color:#e8e1d6; }.icon-button { width:33px;height:33px;border-radius:9px; }.icon-button:hover:not(:disabled),.track-control:hover,.transport-button:hover { background:var(--surface-3); color:white; }

/* Home */
.topbar { position:sticky; top:0; z-index:10; display:flex; gap:30px; align-items:center; height:68px; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid rgba(111,95,77,.35); background:rgba(20,16,13,.82); backdrop-filter:blur(15px); }.brand { display:flex; gap:10px; align-items:center; padding:0; border:0; background:transparent; font-size:20px; font-weight:800; letter-spacing:-.06em; }.brand .icon { color:var(--cyan); filter:drop-shadow(0 0 8px rgba(185,154,115,.6)); }.brand span span { color:var(--purple-2); }.top-nav { display:flex; align-items:center; gap:20px; flex:1; }.top-nav button { padding:8px 0; border:0; color:var(--muted); background:transparent; font-size:12px; font-weight:700; }.top-nav button:hover,.top-nav .is-active { color:white; }.top-actions { display:flex; gap:12px; align-items:center; }.avatar { width:31px; height:31px; border:1px solid #c8b498; border-radius:50%; background:linear-gradient(145deg,#c5ab89,#d6bda7); color:white; font-size:12px; font-weight:800; }
.home-shell { max-width:1280px; margin:auto; padding:45px clamp(20px,5vw,72px) 80px; }.hero { position:relative; display:grid; grid-template-columns:1fr .85fr; overflow:hidden; min-height:292px; padding:34px 54px; border:1px solid rgba(133,114,92,.45); border-radius:26px; background:linear-gradient(120deg,#28211a 0%,#2e261d 44%,#44382c 100%); box-shadow:var(--shadow); isolation:isolate; }.hero h1 { max-width:580px; margin:0; font-size:clamp(31px,4vw,52px); letter-spacing:-.065em; line-height:1.04; }.hero h1 em { font-style:normal; color:#e3d7c5; }.hero-copy { max-width:430px; margin:15px 0 21px; color:#d6cdc0; font-size:13px; line-height:1.7; }.hero-actions { display:flex; gap:10px; }.hero-art { position:relative; min-height:220px; }.orb { position:absolute; border-radius:50%; filter:blur(1px); }.orb-a { width:290px; height:290px; right:40px; top:-62px; background:radial-gradient(circle at 35% 35%,#e3d3c5,transparent 18%),radial-gradient(circle at 55% 55%,#d0b99b 0%,#a18461 35%,transparent 68%); opacity:.7; }.orb-b { width:220px;height:220px;right:-40px;bottom:-80px;background:radial-gradient(circle,#b9976d,transparent 64%);opacity:.5; }.hero-card { position:absolute; z-index:1; display:flex; flex-direction:column; border:1px solid rgba(238,231,220,.25); box-shadow:0 16px 35px rgba(24,19,13,.38); backdrop-filter:blur(10px); }.card-one { right:58px; top:35px; width:195px; padding:16px; border-radius:17px; background:rgba(43,35,27,.65); transform:rotate(-7deg); }.card-one span { color:var(--pink); font-size:20px; }.card-one b { margin-top:9px; font-size:13px; }.card-one small { margin-top:3px; color:#dfd7cb; font-size:10px; }.card-two { right:235px; bottom:14px; width:149px; gap:5px; padding:14px; border-radius:15px; background:rgba(43,34,24,.75); transform:rotate(6deg); }.card-two i { height:8px; border-radius:10px; background:linear-gradient(90deg,#b8986f,#d2bc9e); }.card-two i:nth-child(2){width:75%;background:linear-gradient(90deg,#d6bca6,#d3bda0)}.card-two i:nth-child(3){width:45%;}.cut-mark { position:absolute; right:0; bottom:1px; z-index:2; color:var(--cyan); transform:rotate(-18deg); filter:drop-shadow(0 0 12px var(--cyan)); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:20px; margin-top:36px; }.section-block { min-width:0; }.section-title { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:15px; }.section-title h2 { margin:0; font-size:19px; letter-spacing:-.04em; }.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }.project-card { min-width:0; }.project-thumb { position:relative; display:grid; width:100%; aspect-ratio:1.5; overflow:hidden; place-items:center; padding:0; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#725f49,#413528); }.project-thumb:hover { border-color:var(--cyan); }.project-thumb b { position:absolute; right:7px; bottom:6px; padding:3px 5px; border-radius:5px; background:##0b1020a8; font:9px "DM Mono",monospace; }.project-shape { width:82%;height:80%;border-radius:50% 38% 40% 45%;background:linear-gradient(135deg,#e2d2c4,#c6ac8a 46%,#ac8b62); opacity:.88; transform:rotate(16deg); }.shape-1{border-radius:20% 60% 28% 50%;background:linear-gradient(140deg,#c3aa90,#c9ac93,#c6ae8f)}.shape-2{border-radius:60% 25% 58% 22%;background:linear-gradient(140deg,#a5ab7b,#b79972,#d6c2a7)}.shape-3{border-radius:10px 80% 30% 60%;background:linear-gradient(140deg,#d2bc9e,#d5baa3,#ccb7a1)}.project-play { position:absolute; display:grid; place-items:center; width:36px;height:36px;border-radius:50%;background:##0a1023b3;color:white;opacity:0;transform:scale(.8);transition:.2s; }.project-thumb:hover .project-play { opacity:1;transform:scale(1); }.project-info { display:flex; justify-content:space-between; gap:8px; padding:8px 3px; }.project-info h3 { max-width:180px; overflow:hidden; margin:0 0 3px; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.project-info p { margin:0;color:var(--muted);font-size:9px; }.more-button { width:24px;height:24px;letter-spacing:1px;font-size:13px;color:var(--muted);}.more-button:hover{color:white;}.empty-projects { display:flex; align-items:center; gap:14px; min-height:150px; padding:23px; border:1px dashed #70604e; border-radius:15px; background:linear-gradient(120deg,#231d16,#251e17); }.empty-icon { display:grid; flex:none; width:50px;height:50px;place-items:center;border-radius:15px;background:linear-gradient(140deg,#514435,#5f4c37); color:var(--cyan); }.empty-projects h3{margin:0 0 4px;font-size:13px}.empty-projects p{margin:0;max-width:300px;color:var(--muted);font-size:11px;line-height:1.5}.empty-projects .primary-button{margin-left:auto}
.side-stack { display:grid; gap:13px; }.autocut-card { position:relative; min-height:190px; padding:17px; overflow:hidden; border:1px solid #856a56; border-radius:16px; background:linear-gradient(145deg,#423629,#32291f); }.autocut-card::after { content:"";position:absolute;width:160px;height:160px;right:-75px;top:-75px;border-radius:50%;background:radial-gradient(circle,#d2bba7,transparent 65%);opacity:.65; }.autocut-card>*{position:relative;z-index:1}.pro-pill { display:inline-flex; padding:3px 7px; border-radius:20px;background:linear-gradient(100deg,#d2b9a4,#d4b8a0);font-size:9px;font-weight:800;}.ai-icon{display:block;margin:13px 0 5px;color:#e2d2c3;font-size:25px}.autocut-card h3{margin:0;font-size:15px}.autocut-card p{margin:6px 0 14px;color:#ddd6cc;font-size:10px;line-height:1.55}.local-card{display:flex;gap:10px;align-items:start;padding:13px;border:1px solid var(--line-soft);border-radius:14px;background:#211b15}.local-dot{width:9px;height:9px;margin-top:4px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.local-card b{font-size:11px}.local-card p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.template-block{margin-top:36px}.template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.template-card{position:relative;display:flex;align-items:center;gap:12px;min-height:103px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);text-align:left;overflow:hidden}.template-card:hover{border-color:#af9d87;transform:translateY(-2px)}.template-card::after{content:"";position:absolute;width:110px;height:110px;right:-38px;bottom:-57px;border-radius:50%;opacity:.58}.template-social::after{background:#b49379}.template-vlog::after{background:#b59b79}.template-travel::after{background:#b69f87}.template-gaming::after{background:#b49a78}.template-icon{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:14px;background:#42372b;color:white;font-size:21px}.template-card b,.template-card small{position:relative;z-index:1;display:block}.template-card b{font-size:11px}.template-card small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.template-card em{position:absolute;right:11px;top:10px;color:#e8e1d6;font:9px "DM Mono",monospace}

/* Editor layout */
.editor-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:#14100c; }.editor-topbar { display:flex; align-items:center; height:52px; gap:12px; padding:0 16px; border-bottom:1px solid var(--line-soft); background:#1f1913; }.back-button { display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;transform:rotate(180deg); }.back-button:hover{background:var(--surface-3)}.editor-project-name{display:flex;align-items:center;gap:12px;min-width:150px}.editor-project-name input{width:min(240px,20vw);padding:5px 2px;border:0;border-bottom:1px solid transparent;background:transparent;color:#fbf9f7;font-weight:800;font-size:13px}.editor-project-name input:hover,.editor-project-name input:focus{border-color:#af9f8a;outline:0}.save-state{display:inline-flex;gap:5px;align-items:center;color:#b6a998;font-size:9px}.save-state i{width:6px;height:6px;border-radius:50%;background:var(--green)}.save-state.error i{background:var(--danger)}.editor-top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.editor-divider{width:1px;height:23px;background:var(--line);margin:0 5px}.header-share{padding:8px 11px;font-size:11px}.export-button{padding:9px 13px;font-size:11px}.editor-workspace{display:grid;grid-template-columns:300px minmax(420px,1fr) 300px;min-height:0;flex:1}.library,.inspector{min-width:0;background:#201a14;border-right:1px solid var(--line-soft)}.library{display:flex}.library-tabs{display:flex;flex:0 0 58px;flex-direction:column;gap:2px;padding:9px 6px;border-right:1px solid var(--line-soft);background:#1b1611}.library-tab{display:grid;gap:4px;place-items:center;width:46px;min-height:52px;padding:5px 1px;border:0;border-radius:9px;background:transparent;color:#b1a493;font-size:8px;font-weight:700}.library-tab:hover,.library-tab.active{background:#3d3329;color:white}.library-tab.active{box-shadow:inset 2px 0 0 var(--purple)}.library-content{width:calc(100% - 58px);padding:14px;overflow:auto}.library-heading{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:12px}.library-heading h2{margin:0;font-size:13px;letter-spacing:-.03em}.library-heading p{margin:3px 0 0;color:var(--muted);font-size:9px}.small-primary{padding:6px 8px;border-radius:7px;background:var(--purple);font-size:9px}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:86px;padding:9px;border:1px dashed #82715c;border-radius:10px;background:#28211a;color:#f2ece4;text-align:center}.drop-zone:hover{border-color:var(--cyan);background:#2f271e}.drop-zone span{color:var(--cyan)}.drop-zone b{font-size:10px}.drop-zone small{color:var(--muted);font-size:8px}.asset-list{display:grid;gap:6px;margin-top:12px}.asset-row{display:flex;align-items:center;gap:7px;width:100%;padding:6px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left}.asset-row:hover{border-color:#685947;background:#2e261e}.asset-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#574a3c;color:#f1ebe1;font-size:12px}.asset-icon.type-audio{background:#4c3f31;color:#b99f7d}.asset-row b,.asset-row small{display:block;max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-row b{font-size:9px}.asset-row small{margin-top:2px;color:var(--muted);font-size:8px}.asset-row em{margin-left:auto;color:var(--cyan);font-size:17px;font-style:normal}.library-empty{padding:30px 7px;color:var(--muted);text-align:center;font-size:10px;line-height:1.55}.library-empty span{display:grid;place-items:center;width:44px;height:44px;margin:auto;border-radius:14px;background:#3a3026;color:var(--cyan);font-size:19px}.text-preset{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:10px 7px;border:1px solid var(--line-soft);border-radius:9px;background:#251e17;text-align:left}.text-preset:hover{border-color:#b39e83}.text-preset>span{display:grid;place-items:center;width:33px;height:33px;border-radius:7px;background:#55483a;font-weight:800}.text-preset.accent>span{background:linear-gradient(145deg,#cfb9a6,#bfa889)}.text-preset b,.text-preset small{display:block}.text-preset b{font-size:10px}.text-preset small{margin-top:2px;color:var(--muted);font-size:8px}.text-preset em{margin-left:auto;color:#eee8de;font-style:normal}.library-note{margin-top:15px;padding:10px;border-left:2px solid var(--cyan);border-radius:0 7px 7px 0;background:#2a221a;color:#d4cbbe;font-size:9px;line-height:1.5}.search-field{display:flex;gap:6px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#241e17;color:#aea08e}.search-field input{width:100%;border:0;outline:0;background:transparent;color:white;font-size:10px}.effect-filters{display:flex;gap:5px;margin:10px -2px 8px;padding:0 2px 4px;overflow:auto}.effect-filters button{flex:none;padding:4px 7px;border:1px solid var(--line);border-radius:12px;background:transparent;color:#beb3a4;font-size:8px}.effect-filters button.active{border-color:#b7a185;background:#574838;color:#f4efe7}.apply-hint{margin:7px 0;color:#b4a796;font-size:9px}.apply-hint b{color:#f4efe7}.effects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.effect-card{overflow:hidden;padding:0 0 6px;border:1px solid var(--line-soft);border-radius:8px;background:#282119;text-align:left}.effect-card:hover{border-color:#cbb79c}.effect-card>span{position:relative;display:block;height:41px;overflow:hidden}.effect-card>span::before,.effect-card>span::after,.effect-card>span i{content:"";position:absolute;border-radius:50%}.effect-card>span::before{width:70px;height:70px;left:-10px;top:-24px;background:#cdad92}.effect-card>span::after{width:48px;height:48px;right:-2px;bottom:-17px;background:#b89971}.effect-card>span i:first-child{width:70px;height:7px;left:14px;top:18px;background:#dec9b6;transform:rotate(-24deg)}.effect-card>span i:last-child{width:37px;height:37px;left:43%;top:7px;border:3px solid #f3ede5}.fx-tone-1>span{filter:hue-rotate(42deg)}.fx-tone-2>span{filter:hue-rotate(89deg)}.fx-tone-3>span{filter:hue-rotate(132deg)}.fx-tone-4>span{filter:hue-rotate(175deg)}.fx-tone-5>span{filter:hue-rotate(225deg)}.fx-tone-6>span{filter:hue-rotate(275deg)}.fx-tone-7>span{filter:saturate(.45)}.effect-card b,.effect-card small{display:block;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.effect-card b{margin-top:6px;font-size:8px}.effect-card small{margin-top:2px;color:#c3b7a6;font-size:7px}.transition-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.transition-card{padding:0 0 7px;border:1px solid var(--line);border-radius:8px;background:#272019;text-align:left}.transition-art{display:block;height:43px;background:linear-gradient(135deg,#b39875,#decbba)}.tr-1{background:linear-gradient(90deg,#0c0907 45%,#eee6da 45%)}.tr-2{background:linear-gradient(110deg,#b4956d,#241d16 42%,#dac4b0)}.tr-3{background:radial-gradient(circle,#e5d6c8 7%,#c3aa89 27%,#241d16 68%)}.tr-4{background:linear-gradient(125deg,#c8aa91,#d3c3ac);filter:blur(2px)}.tr-5{background:radial-gradient(circle,#e9ded3 13%,#8f7556 17%,#312920 30%)}.transition-card b,.transition-card small{display:block;padding:0 6px}.transition-card b{margin-top:6px;font-size:8px}.transition-card small{margin-top:2px;color:#c6bbac;font-size:7px}
.editor-main{display:flex;min-width:0;flex-direction:column;background:#17130f}.preview-area{display:flex;min-height:0;flex:1;flex-direction:column;padding:20px 24px 10px}.canvas-stage{display:grid;min-height:0;flex:1;place-items:center}.preview-canvas{position:relative;display:block;overflow:hidden;max-width:100%;width:min(100%,980px);container-type:inline-size;border:1px solid #5f503f;border-radius:8px;background:linear-gradient(140deg,#372d23,#1b1611);box-shadow:0 12px 32px #00000077}.preview-empty{display:grid;place-items:center;align-content:center;gap:5px;width:100%;color:#e4dcd1;text-align:center}.preview-empty span{color:var(--cyan)}.preview-empty b{font-size:12px}.preview-empty small{color:#b3a695;font-size:10px}.preview-asset{position:absolute;width:100%;height:100%;object-fit:contain;transform-origin:center;pointer-events:none}.preview-asset.selected-preview{outline:1px dashed rgba(207,184,152,.8);outline-offset:-4px}.text-overlay{position:absolute;top:42%;left:0;right:0;z-index:10;padding:0 7%;font-weight:800;letter-spacing:-.05em;line-height:1.04;text-align:center;text-shadow:0 3px 12px #00000088;pointer-events:none}.text-overlay.selected-preview{outline:1px dashed #d7c6ae;outline-offset:-4px}.missing-media{display:grid;place-items:center;width:100%;color:#eae3d9;font-size:12px}.transport{display:flex;align-items:center;gap:7px;max-width:800px;width:86%;margin:11px auto 0}.transport-button{width:26px;height:26px;border-radius:7px;font-size:13px}.timecode{flex:none;margin-left:3px;color:#f4f0e9;font:10px "DM Mono",monospace}.timecode i{color:#a49582;font-style:normal}.scrubber{width:100%;height:3px;accent-color:var(--purple-2)}.right-transport{margin-left:2px}
.inspector{border-right:0;border-left:1px solid var(--line-soft);overflow:auto}.inspector-heading{display:flex;justify-content:space-between;align-items:start;padding:15px 14px 12px;border-bottom:1px solid var(--line-soft)}.inspector-heading h2{margin:0;font-size:13px}.inspector-heading .eyebrow{margin:0 0 3px;font-size:8px}.inspector-empty{display:grid;place-items:center;align-content:center;min-height:240px;padding:18px;text-align:center}.inspector-empty span{color:#a59580}.inspector-empty b{margin-top:11px;font-size:11px}.inspector-empty p{margin:4px 0;color:#ac9f8e;font-size:9px;line-height:1.5}.property-group{padding:12px 14px;border-bottom:1px solid var(--line-soft)}.group-title{margin-bottom:10px;color:#eee9e1;font-size:10px;font-weight:800}.field-label{display:block;margin:9px 14px 0;color:#cec4b7;font-size:9px;font-weight:700}.property-group .field-label{margin:8px 0 0}.field-label input:not([type="range"]),.field-label textarea{display:block;width:100%;margin-top:5px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:#1d1812;color:#fbf9f6;font-size:10px;resize:vertical}.field-label output{float:right;color:#f0ebe4;font-family:"DM Mono",monospace;font-size:8px}.range-control{display:block;width:100%;margin:7px 0 0;accent-color:#d3bea2}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.two-fields label{color:#c9bfb1;font-size:8px}.number-input{width:100%;margin-top:4px;padding:6px;border:1px solid var(--line);border-radius:6px;background:#1d1812;color:#f7f3ed;font-size:9px}.checkbox-row{display:flex;gap:6px;align-items:center;margin-top:11px;color:#ded7cc;font-size:9px}.checkbox-row input{accent-color:#d3bea2}.active-effect{display:flex;gap:8px;align-items:center;margin:13px 14px;padding:8px;border:1px solid #907a5f;border-radius:8px;background:#41362b}.active-effect>span{color:#e6d7c9}.active-effect div{min-width:0;flex:1}.active-effect b,.active-effect small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-effect b{font-size:9px}.active-effect small{margin-top:2px;color:#d3cabd;font-size:8px}.active-effect button{padding:2px;border:0;background:transparent;color:#f3eee6}.clip-details{display:flex;justify-content:space-between;margin:15px 14px;color:#b6aa99;font-size:8px}.clip-details b{display:block;margin-top:3px;color:#f3efe8;font:8px "DM Mono",monospace}
.timeline-section{height:274px;flex:none;border-top:1px solid var(--line);background:#1e1913}.timeline-toolbar{display:flex;justify-content:space-between;align-items:center;height:43px;padding:0 13px;border-bottom:1px solid var(--line-soft)}.timeline-tools,.timeline-zoom{display:flex;align-items:center;gap:5px}.tool-button{min-height:26px;padding:5px 7px;border-radius:6px;background:transparent;color:#cfc5b8;font-size:9px}.tool-button:hover:not(:disabled){background:#41372c;color:white}.danger-tool:hover:not(:disabled){color:#e2c2b9}.tool-separator{width:1px;height:17px;margin:0 4px;background:var(--line)}.timeline-zoom{color:#c9beaf;font-size:12px}.timeline-zoom input{width:54px;accent-color:#d2bda0}.fit-button{padding:5px 6px;border-radius:5px;background:#3c3228;color:#e1d9cd;font-size:8px}.timeline-scroll{height:230px;overflow:auto}.timeline-grid{position:relative;min-height:220px}.timeline-ruler{display:flex;height:28px;border-bottom:1px solid #382f25}.track-label-spacer{width:150px;flex:none;border-right:1px solid var(--line-soft)}.ruler-marks{position:relative;flex:1}.ruler-marks span{position:absolute;top:7px;height:21px;padding-left:4px;border-left:1px solid #56493a;color:#a39481;font:8px "DM Mono",monospace}.playhead{position:absolute;z-index:9;top:28px;bottom:0;width:1px;background:#dac5b3;pointer-events:none}.playhead i{position:absolute;top:-3px;left:-5px;width:11px;height:11px;border-radius:2px 2px 50% 50%;background:#dac5b3;transform:rotate(45deg)}.track-row{display:flex;height:48px;border-bottom:1px solid #362d24}.track-label{display:flex;align-items:center;gap:5px;width:150px;flex:none;padding:0 7px;border-right:1px solid var(--line-soft);background:#1c1712}.track-type-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:5px;background:#3f352a;color:#d3c9bb}.track-label div{min-width:0;flex:1}.track-label b,.track-label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-label b{font-size:8px}.track-label small{margin-top:1px;color:#9a8a76;font-size:7px}.track-control{width:17px;height:20px;color:#a2927e}.track-control.active{color:#f5f1ec}.track-lane{position:relative;min-width:0;flex:1;background:repeating-linear-gradient(90deg,transparent 0,transparent 73px,#322920 74px)}.timeline-clip{position:absolute;top:6px;display:flex;align-items:center;gap:4px;height:36px;overflow:hidden;padding:0 8px;border:1px solid transparent;border-radius:6px;box-shadow:inset 0 0 0 1px ##ffffff15;cursor:grab;user-select:none}.timeline-clip:active{cursor:grabbing}.timeline-clip.video{background:linear-gradient(100deg,#8d7457,#ae9473)}.timeline-clip.overlay{background:linear-gradient(100deg,#9e7b60,#b6987f)}.timeline-clip.audio{background:linear-gradient(100deg,#535838,#7d825c)}.timeline-clip.text{background:linear-gradient(100deg,#9c7d65,#c2a893)}.timeline-clip.selected{border-color:#fbf9f6;box-shadow:0 0 0 1px var(--cyan),0 0 12px ##43d9ef55}.timeline-clip b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.timeline-clip small{font:7px "DM Mono",monospace;opacity:.7}.clip-glyph{font-size:10px}.trim-handle{position:absolute;top:0;bottom:0;width:5px;cursor:ew-resize}.trim-handle.left{left:0}.trim-handle.right{right:0}.trim-handle:hover{background:#faf8f4}

/* Modals and responsive */
.modal-backdrop{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:##040713aa;backdrop-filter:blur(5px)}.modal{position:relative;width:min(450px,100%);padding:25px;border:1px solid #786754;border-radius:18px;background:linear-gradient(145deg,#312921,#241e17);box-shadow:0 20px 65px #000000aa}.modal h2{margin:0;font-size:21px;letter-spacing:-.05em}.modal-close{position:absolute;top:11px;right:11px;width:29px;height:29px;border-radius:7px}.modal-close:hover{background:#483d31}.modal .field-label{margin:19px 0 0}.modal .field-label input{font-size:12px}.ratio-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:8px}.ratio-choice{display:grid;gap:5px;place-items:center;padding:9px 3px;border:1px solid var(--line);border-radius:9px;background:#231d16;color:#cec4b7;font-size:8px}.ratio-choice:hover,.ratio-choice.selected{border-color:#d4bfa3;background:#43382c;color:white}.ratio-box{display:block;width:18px;height:12px;border:2px solid currentColor;border-radius:2px}.ratio-9-16{height:20px}.ratio-1-1{width:16px;height:16px}.ratio-4-5{height:18px}.ratio-3-4{width:14px;height:18px}.mini-modal{width:min(330px,100%)}.mini-modal h2{margin:5px 0 15px;font-size:17px}.mini-modal p{margin:0 0 20px;color:#d8d0c4;font-size:12px;line-height:1.6}.modal-action{display:flex;gap:9px;align-items:center;width:100%;padding:11px 5px;border:0;border-top:1px solid var(--line-soft);background:transparent;text-align:left;font-size:12px}.modal-action:hover{color:var(--cyan)}.modal-action.danger{color:#e3c3ba}.export-modal{width:min(530px,100%)}.export-choice{display:flex;align-items:center;gap:12px;margin-top:20px;padding:13px;border:1px solid #786754;border-radius:12px;background:#272019}.export-choice.disabled{margin-top:10px;opacity:.65}.export-symbol{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#56493b;color:#eee6db;font-weight:800}.export-choice b{font-size:12px}.export-choice p{margin:4px 0 0;color:#cec4b6;font-size:9px;line-height:1.5}.export-choice .primary-button{margin-left:auto;font-size:10px}.status-chip{display:inline-flex;margin-top:9px;padding:3px 6px;border-radius:12px;background:#4a4035;color:#dad2c6;font-size:8px}.modal-note{margin:15px 0 0;color:#bdb1a0;font-size:9px;line-height:1.55}.toast{position:fixed;z-index:70;bottom:22px;left:50%;display:flex;gap:7px;align-items:center;padding:10px 13px;border:1px solid #6c5d4c;border-radius:11px;background:#2f271e;color:#f4f0e9;box-shadow:var(--shadow);font-size:11px;transform:translateX(-50%)}.toast .icon{color:#b3b990}
@media (max-width:1050px){.top-nav{gap:12px}.editor-workspace{grid-template-columns:225px minmax(330px,1fr) 235px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:34px}.card-two{right:175px}.timeline-section{height:257px}.timeline-scroll{height:213px}}
@media (max-width:780px){.topbar{height:58px;padding:0 18px}.top-nav{display:none}.home-shell{padding:25px 17px 60px}.hero{grid-template-columns:1fr;min-height:330px;padding:28px 24px}.hero-art{min-height:120px}.card-one{right:35px;top:0}.card-two{right:190px;bottom:-13px}.cut-mark{right:10px;bottom:-16px}.dashboard-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.autocut-card{min-height:160px}.editor-shell{height:auto;min-height:100vh;overflow:visible}.editor-topbar{position:sticky;top:0;z-index:20}.editor-project-name input{width:90px}.save-state,.header-share{display:none}.editor-workspace{display:flex;flex-direction:column}.library{order:2;display:block;border-right:0;border-top:1px solid var(--line-soft)}.library-tabs{position:sticky;bottom:0;z-index:11;display:flex;flex-direction:row;justify-content:space-around;width:100%;padding:5px;border-top:1px solid var(--line);border-right:0}.library-tab{width:calc(20vw - 10px);min-height:42px}.library-content{width:100%;max-height:310px}.editor-main{order:1;min-height:560px}.preview-area{min-height:350px;padding:13px 14px 7px}.preview-canvas,.transport{width:100%;}.inspector{order:3;max-height:390px;border-top:1px solid var(--line);border-left:0}.timeline-section{height:252px}.timeline-scroll{height:208px}.timeline-toolbar{padding:0 7px}.timeline-tools .tool-button:not(:first-child):not(.danger-tool){display:none}.timeline-zoom{display:none}.editor-top-actions{gap:1px}.editor-top-actions .icon-button{width:29px}.export-button{padding:8px 9px;font-size:0}.export-button .icon{width:17px}.timeline-clip{height:35px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.empty-projects{align-items:start;flex-wrap:wrap}.empty-projects .primary-button{margin-left:64px}.ratio-picker{grid-template-columns:repeat(3,1fr)}}
.free-chip{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:10px;background:#2b2d20;color:#aeb389;font-size:8px;font-weight:800;vertical-align:middle}.field-label select{display:block;width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:7px;background:#1d1812;color:#fbf9f6;font-size:11px}.export-progress{display:grid;gap:10px;margin-top:18px;padding:14px;border:1px solid #786754;border-radius:12px;background:#272019}.export-progress p{margin:0;color:#ded7cc;font-size:10px}.progress-track{height:8px;overflow:hidden;border-radius:8px;background:#1b1610}.progress-fill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--purple),var(--cyan));transition:width .25s ease}.cut-list{display:grid;gap:6px;max-height:180px;margin:14px 0;overflow:auto}.cut-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--line-soft);border-radius:8px;background:#251e17;font:10px "DM Mono",monospace}.cut-row em{color:var(--pink);font-style:normal;font-family:Manrope,sans-serif;font-size:9px}.preview-asset.chroma-on{outline:1px dotted rgba(174,179,137,.7);outline-offset:-4px}.autocut-card.full{margin-top:14px}
@media (max-width:450px){.hero h1{font-size:33px}.hero-actions{align-items:stretch;flex-direction:column}.hero-art{min-height:110px}.card-two{right:170px}.side-stack{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr}.top-actions .icon-button{display:none}.project-grid{gap:9px}.editor-topbar{padding:0 8px;gap:4px}.editor-project-name{min-width:0;flex:1}.editor-project-name input{width:100%}.editor-top-actions .editor-divider{display:none}.editor-top-actions .icon-button:nth-of-type(2){display:none}.timeline-tools .tool-button{font-size:0}.timeline-tools .tool-button .icon{width:17px}.timeline-toolbar{height:38px}.timeline-section{height:247px}.timeline-scroll{height:209px}.preview-area{min-height:310px}.modal{padding:22px 18px}.export-choice{align-items:start;flex-wrap:wrap}.export-choice .primary-button{margin-left:50px}}

/* ===== SeyCut Pro Editor: direct manipulation + large workspace ===== */
.preview-toolbar{display:flex;align-items:center;gap:10px;max-width:980px;width:100%;margin:0 auto 10px}
.ratio-select{display:flex;align-items:center;gap:6px;color:#cec4b7;font-size:11px;font-weight:700}
.ratio-select select,.custom-size input{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#1d1812;color:#fbf9f6;font-size:11px}
.custom-size{display:flex;align-items:center;gap:4px;color:#cec4b7;font-size:10px}
.custom-size input{width:70px}
.pv-zoom-controls{display:flex;gap:4px;margin-left:auto}
.canvas-stage{display:flex;min-height:0;flex:1;align-items:center;justify-content:center}
.canvas-scroll{width:100%;max-height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px}
.canvas-zoom{transform-origin:center center;margin:auto}
.preview-canvas{margin:auto}
.preview-canvas{box-shadow:0 16px 44px #00000099}
.pv-guides{position:absolute;inset:0;pointer-events:none;opacity:.28}
.preview-canvas.has-selection .pv-guides{opacity:.6}
.pv-guides i{position:absolute;background:##3dd9ef55}
.g-v{top:0;bottom:0;width:1px}.g-v1{left:33.33%}.g-v2{left:66.66%}
.g-h{left:0;right:0;height:1px}.g-h1{top:33.33%}.g-h2{top:66.66%}
.g-c-v{left:50%;top:0;bottom:0;width:1px;background:##fb8bc855}
.g-c-h{top:50%;left:0;right:0;height:1px;background:##fb8bc855}
.pv-clip{position:absolute;transform-origin:center center;touch-action:none;user-select:none;-webkit-user-select:none}
.pv-clip .pv-media{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.pv-sticker{width:100%;text-align:center;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 10px #00000088)}
.pv-text{width:100%;text-align:center;font-weight:800;letter-spacing:-.02em;line-height:1.15;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 3px 12px #00000099;pointer-events:none}
body.pv-grabbing,body.pv-grabbing .pv-clip{cursor:grabbing}
.pv-box{position:absolute;inset:-10px;border:2px solid #b99a73;border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px #00000066,0 0 18px ##3dd9ef44}
.pv-handle{position:absolute;width:22px;height:22px;border-radius:6px;background:#1b1610;border:2px solid #b99a73;pointer-events:auto;cursor:nwse-resize;touch-action:none}
.pv-handle[data-handle="nw"]{left:-12px;top:-12px}.pv-handle[data-handle="ne"]{right:-12px;top:-12px;cursor:nesw-resize}
.pv-handle[data-handle="sw"]{left:-12px;bottom:-12px;cursor:nesw-resize}.pv-handle[data-handle="se"]{right:-12px;bottom:-12px}
.pv-edge{position:absolute;background:#1b1610;border:2px solid #b99a73;pointer-events:auto;touch-action:none}
.pv-edge[data-handle="n"]{left:50%;top:-9px;width:26px;height:14px;transform:translateX(-50%);border-radius:6px;cursor:ns-resize}
.pv-edge[data-handle="s"]{left:50%;bottom:-9px;width:26px;height:14px;transform:translateX(-50%);border-radius:6px;cursor:ns-resize}
.pv-edge[data-handle="w"]{left:-9px;top:50%;width:14px;height:26px;transform:translateY(-50%);border-radius:6px;cursor:ew-resize}
.pv-edge[data-handle="e"]{right:-9px;top:50%;width:14px;height:26px;transform:translateY(-50%);border-radius:6px;cursor:ew-resize}
.pv-rot-stem{position:absolute;left:50%;top:-34px;width:2px;height:26px;background:#b99a73;transform:translateX(-50%)}
.pv-rot{position:absolute;left:50%;top:-58px;width:30px;height:30px;transform:translateX(-50%);border-radius:50%;background:#1b1610;border:2px solid #d9c2ad;color:#d9c2ad;font-size:16px;line-height:1;pointer-events:auto;cursor:grab;touch-action:none}
/* Library additions */
.library-tabs{flex-basis:64px}
.library-tab{width:52px;min-height:56px;font-size:8px}
.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sticker-cell{font-size:26px;padding:10px 4px;border:1px solid var(--line-soft);border-radius:10px;background:#251e17}
.sticker-cell:hover{border-color:var(--cyan);transform:scale(1.08)}
.filter-list{display:grid;gap:6px}
.filter-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line-soft);border-radius:8px;background:#251e17;font-size:11px;text-align:left}
.filter-row:hover{border-color:#cbb79c}
.filter-dot{width:26px;height:26px;border-radius:8px;flex:none}
.filter-naturel{background:#aa9d8d}.filter-vif{background:linear-gradient(135deg,#d4baa3,#b08c60)}.filter-doux{background:linear-gradient(135deg,#f3f0ec,#cec4b7)}
.filter-cinema{background:linear-gradient(135deg,#594a39,#a5937f)}.filter-froid{background:linear-gradient(135deg,#c7ab87,#b08c60)}
.filter-chaud{background:linear-gradient(135deg,#c6ae94,#d4baa3)}.filter-nb{background:linear-gradient(135deg,#000000,#ffffff)}.filter-vintage{background:linear-gradient(135deg,#8b7c6c,#d3c8bd)}
.caption-actions{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.caption-list{display:grid;gap:5px;max-height:300px;overflow:auto}
.caption-row{display:flex;gap:8px;align-items:baseline;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:#251e17;font-size:10px;text-align:left}
.caption-row b{font-family:"DM Mono",monospace;color:var(--cyan);flex:none}
.caption-row span{color:#f1ece4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-row{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
.bg-swatch{width:36px;height:36px;border-radius:9px;border:2px solid transparent;padding:0}
.bg-swatch.active{border-color:var(--cyan)}
/* Inspector additions */
.align-row{display:flex;gap:4px;margin:8px 0 2px}
.align-row .tool-button{flex:1;font-size:14px;min-height:30px}
.filter-chip{padding:6px 9px;border:1px solid var(--line);border-radius:14px;background:#282119;font-size:10px}
.filter-chip:hover{border-color:#cbb79c}
.filter-row{display:flex;gap:6px;flex-wrap:wrap}
/* Timeline pro */
.timeline-section{position:relative;height:330px}
.tl-resizer{position:absolute;top:-4px;left:0;right:0;height:9px;cursor:ns-resize;z-index:20}
.tl-resizer:hover{background:##3dd9ef33}
.playhead{width:2px;background:#d2b59c;box-shadow:0 0 8px ##ff6fae88}
.playhead i{width:13px;height:13px}
.track-row{height:76px}
.track-lane.lane-over,.track-lane:empty{outline:none}
.tl-thumb{position:absolute;inset:2px;border-radius:5px;background-size:cover;background-position:center;opacity:.5;pointer-events:none}
.tl-thumb-loading{display:grid;place-items:center;color:#f1ece4}
.tl-sticker{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;opacity:.85;pointer-events:none}
.tl-textprev{position:absolute;inset:4px 8px;color:#f6f1ec;font-size:10px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.9;pointer-events:none}
.tl-wave{position:absolute;left:6px;right:6px;top:50%;height:70%;transform:translateY(-50%);display:flex;align-items:center;gap:1px;opacity:.75;pointer-events:none}
.tl-wave i{flex:1;background:#c4c9a4;border-radius:2px;min-height:2px}
.tl-wave-loading{position:absolute;inset:0;display:grid;place-items:center;color:#cccfb8;font-size:9px;opacity:.7}
.timeline-clip b{position:relative;z-index:1;text-shadow:0 1px 4px #00000099}
.ctx-menu{position:fixed;z-index:100;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#29221b;box-shadow:0 14px 40px #000000aa}
.ctx-menu button{display:block;width:100%;padding:9px 10px;border:0;background:transparent;text-align:left;font-size:12px;border-radius:6px}
.ctx-menu button:hover{background:#40352a}
.ctx-menu button.danger{color:#e3c3ba}
@media (max-width:1050px){.editor-workspace{grid-template-columns:250px minmax(330px,1fr) 250px}}
@media (max-width:780px){
.pv-handle{width:28px;height:28px}
.pv-rot{width:36px;height:36px;top:-64px}
.pv-rot-stem{top:-38px;height:28px}
.preview-toolbar{flex-wrap:wrap}
.inspector{max-height:44vh}
.timeline-section{height:300px}
}

/* ===== SeyCut design tokens: buttons, type, spacing ===== */
:root{
  --btn-h:40px; --btn-h-sm:32px; --btn-h-lg:48px; --btn-radius:10px;
  --touch:44px; --gap:8px;
  --font-xs:11px; --font-sm:12px; --font-md:14px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
html,body{overflow-x:clip}
html{height:100%}
body{min-height:100vh;min-height:100dvh}
img,video,svg{max-width:100%}
h1{font-size:clamp(28px,4vw + 12px,52px)}
h2{font-size:clamp(16px,1.4vw + 12px,21px)}
/* Consistent button system */
.primary-button,.ghost-button,.dark-button,.small-primary,.tool-button,.fit-button,.filter-chip,.text-button{min-height:var(--btn-h);padding:0 14px;border-radius:var(--btn-radius);font-size:var(--font-sm);line-height:1.2;white-space:nowrap}
.primary-button.compact,.small-primary,.fit-button{min-height:var(--btn-h-sm);padding:0 10px;font-size:var(--font-xs)}
.tool-button{min-height:var(--btn-h-sm);padding:0 9px;font-size:var(--font-xs)}
.text-button{min-height:var(--btn-h-sm)}
.icon-button{width:var(--btn-h);height:var(--btn-h);border-radius:var(--btn-radius)}
.icon-button .icon{width:20px;height:20px}
.more-button{width:32px;height:32px;font-size:14px}
.modal-close{width:40px;height:40px}
.transport-button{width:var(--touch);height:var(--touch);border-radius:12px}
.transport-button .icon{width:20px;height:20px}
.track-control{width:30px;height:30px;border-radius:8px}
.track-control .icon{width:15px;height:15px}
.trim-handle{width:12px}
.trim-handle::after{content:"";position:absolute;inset:0 4px;background:transparent}
.timeline-clip{min-height:40px}
button:disabled{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){
  .primary-button,.ghost-button,.dark-button{min-height:var(--touch)}
  .tool-button,.small-primary,.fit-button{min-height:var(--touch);padding:0 12px;font-size:var(--font-sm)}
  .library-tab{min-height:56px}
  .caption-row,.filter-row,.asset-row{min-height:var(--touch)}
}
/* Icon distortion guard */
svg.icon{flex:none}
/* Full viewport + fullscreen */
.editor-shell{height:100vh;height:100dvh}
:fullscreen,.editor-shell:fullscreen{background:#0c0a08}
:fullscreen .editor-topbar{padding-top:var(--sat)}
/* Toast + modal safe areas */
.toast{bottom:calc(22px + var(--sab));max-width:min(520px,calc(100vw - 32px));text-align:center}
.modal-backdrop{padding:16px;padding-bottom:calc(16px + var(--sab))}
.modal{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}
/* ===== Tablet ≤1023px ===== */
@media (max-width:1023px){
  .editor-workspace{grid-template-columns:232px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .library{grid-row:1}
  .editor-main{grid-column:2;min-width:0}
  .inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:34vh;max-height:34dvh}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-nav{gap:12px}
}
/* ===== Mobile ≤640px ===== */
.mobile-dock{display:none}
.sheet-close{display:none}
@media (max-width:640px){
  .topbar{height:60px;padding:0 14px;padding-left:calc(14px + var(--sal));padding-right:calc(14px + var(--sar));gap:12px}
  .top-nav{display:none}
  .brand{font-size:17px}
  .home-shell{padding:20px 14px calc(28px + var(--sab))}
  .hero{padding:24px 20px;min-height:0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .primary-button,.hero-actions .ghost-button{width:100%;min-height:var(--btn-h-lg)}
  .dashboard-grid{grid-template-columns:1fr}
  .side-stack{grid-template-columns:1fr}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .project-info h3{max-width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .template-grid{grid-template-columns:1fr}
  /* Editor header: compact, no overlap */
  .editor-topbar{height:56px;gap:6px;padding:0 8px;padding-top:var(--sat)}
  .editor-project-name{min-width:0;flex:1}
  .editor-project-name input{width:100%;font-size:12px}
  .save-state span{display:none}
  .header-share,.editor-top-actions .editor-divider,.editor-top-actions .icon-button:nth-of-type(2){display:none}
  .export-button{font-size:var(--font-xs);min-height:var(--btn-h);padding:0 12px}
  .export-button .icon{width:16px;height:16px}
  /* Preview stays usable */
  .preview-area{padding:10px 10px 6px;min-height:300px}
  .preview-toolbar{flex-wrap:wrap;gap:6px}
  .transport{width:100%;gap:4px}
  .timecode{font-size:9px}
  /* Library tabs become scrollable bottom bar; content becomes sheet */
  .editor-workspace{display:flex;flex-direction:column}
  .library{order:3;border-top:1px solid var(--line)}
  .library-tabs{flex-direction:row;flex:none;width:100%;overflow-x:auto;padding:6px 8px;padding-bottom:calc(6px + var(--sab));border-right:0;border-top:1px solid var(--line);scrollbar-width:none}
  .library-tabs::-webkit-scrollbar{display:none}
  .library-tab{flex:0 0 auto;width:64px}
  .library-content{display:none;width:100%;max-height:38vh;max-height:38dvh;border-top:1px solid var(--line-soft)}
  body.sheet-library .library-content{display:block}
  .inspector{display:none;order:4;max-height:42vh;max-height:42dvh;border-top:1px solid var(--line);border-left:0}
  body.sheet-inspector .inspector{display:block}
  .sheet-close{display:inline-grid}
  .editor-main{order:1;min-height:0}
  .timeline-section{order:2}
  body.tl-collapsed .timeline-section{height:118px !important}
  body.tl-collapsed .timeline-scroll{height:70px !important}
  body.tl-collapsed .track-row{display:none}
  body.tl-collapsed .track-row:first-of-type{display:flex}
  /* Mobile dock */
  .mobile-dock{display:flex;order:5;flex:none;gap:2px;overflow-x:auto;padding:6px 8px;padding-bottom:calc(6px + var(--sab));border-top:1px solid var(--line);background:#1b1611;scrollbar-width:none}
  .mobile-dock::-webkit-scrollbar{display:none}
  .mobile-dock button{flex:1 0 auto;min-width:68px;min-height:var(--touch);border:1px solid transparent;border-radius:10px;background:transparent;color:#beb2a3;font-size:10px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .mobile-dock button.active{color:#ffffff;background:#3d3329}
  .mobile-dock .icon{width:20px;height:20px}
  /* Toolbar scroll instead of hidden buttons */
  .timeline-toolbar{overflow-x:auto;scrollbar-width:none}
  .timeline-toolbar::-webkit-scrollbar{display:none}
  .timeline-tools,.timeline-zoom{flex:none}
  /* Dialogs fit */
  .modal{padding:20px 16px}
  .export-choice{flex-wrap:wrap}
  .ratio-picker{grid-template-columns:repeat(3,1fr)}
}
/* Landscape phones: more preview room */
@media (max-width:1023px) and (orientation:landscape){
  .preview-area{min-height:240px}
  .timeline-section{height:220px !important}
  .timeline-scroll{height:172px !important}
}
/* ===== Auth ===== */
.auth-card{display:grid;gap:12px;margin-top:16px}
.auth-tabs{display:flex;gap:6px}
.auth-tabs button{flex:1;min-height:var(--btn-h);border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.auth-tabs button.active{background:#43382c;color:#ffffff;border-color:#d4bfa3}
.auth-card .field-label{margin:0}
.auth-card input{font-size:14px}
.field-error{color:#e3c3ba;font-size:11px;min-height:14px;margin:0}
.auth-user{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line-soft);border-radius:10px;background:#251e17}
.auth-user b{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.verified-pill{font-size:9px;font-weight:800;padding:3px 8px;border-radius:12px;background:#2b2d20;color:#aeb389}
.unverified-pill{font-size:9px;font-weight:800;padding:3px 8px;border-radius:12px;background:#2d261f;color:#c8b29b}
.avatar.has-user{background:linear-gradient(145deg,#7d825c,#c7ab87)}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ===== Keyframes (CapCut-style diamonds) ===== */
.field-label .kf-btn { margin-left:8px; }
.kf-btn { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:#1d1812; color:#a49582; font-size:13px; line-height:1; vertical-align:middle; transition:transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease; }
.kf-btn:hover { border-color:var(--cyan); color:var(--cyan); transform:scale(1.08); }
.kf-btn.armed { border-color:#b7a185; color:#e8decf; background:#3d3227; }
.kf-btn.on { border-color:var(--cyan); color:#1f1811; background:linear-gradient(135deg,var(--cyan),#dbcab2); box-shadow:0 0 12px ##3dd9ef66; }
.kf-panel { border-top:1px solid var(--line-soft); }
.kf-title { display:flex; justify-content:space-between; align-items:center; }
.kf-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#3d3329; color:#e8e1d6; font-size:10px; }
.kf-auto { padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:#beb3a4; font-size:10px; font-weight:800; }
.kf-auto.on { border-color:var(--cyan); background:#382c20; color:var(--cyan); }
.kf-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed #382f25; }
.kf-row:first-of-type { border-top:0; }
.kf-row b { font-size:10px; flex:1; }
.kf-row em { color:var(--muted); font-style:normal; font-size:9px; }
.kf-nav { display:flex; gap:2px; }
.kf-step { width:30px; height:30px; border:1px solid var(--line); border-radius:7px; background:#1d1812; color:#e8e1d6; font-size:15px; line-height:1; }
.kf-step:hover { border-color:var(--cyan); color:var(--cyan); }
.kf-clear { font-size:9px; padding:2px 0; }
.kf-list { display:grid; gap:6px; margin-top:10px; max-height:220px; overflow:auto; }
.kf-item { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line-soft); border-radius:8px; background:#1d1812; }
.kf-item.sel { border-color:var(--cyan); box-shadow:0 0 10px ##3dd9ef33; }
.kf-goto { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:2px; border:0; background:transparent; color:#f4f0e9; font-size:10px; text-align:left; }
.kf-goto b { font-family:"DM Mono",monospace; font-size:10px; color:var(--cyan); }
.kf-goto span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#beb3a4; font-size:9px; }
.kf-item select { padding:5px 6px; border:1px solid var(--line); border-radius:6px; background:#241e17; color:#f1ece5; font-size:9px; max-width:118px; }
.kf-del { width:28px; height:28px; flex:none; border:1px solid var(--line); border-radius:7px; background:transparent; color:#e3c3ba; font-size:15px; line-height:1; }
.kf-del:hover { border-color:var(--danger); background:#2e2822; }
/* Timeline keyframe lane */
.timeline-clip .kf-lane { position:absolute; left:8px; right:8px; bottom:3px; height:14px; pointer-events:none; }
.kf-dot { position:absolute; top:1px; width:12px; height:12px; margin-left:-6px; background:#1b1610; border:2px solid var(--cyan); transform:rotate(45deg); border-radius:2px; pointer-events:auto; cursor:grab; touch-action:none; }
.kf-dot:hover { transform:rotate(45deg) scale(1.25); }
.kf-dot.sel { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
@media (pointer:coarse) {
  .kf-btn { width:38px; height:38px; font-size:15px; }
  .kf-step { width:38px; height:38px; }
  .kf-dot { width:16px; height:16px; margin-left:-8px; }
  .kf-del { width:34px; height:34px; }
}

/* ===== Fond animé « marbre distordu » : noir, blanc, brun ===== */
.distort-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#0a0908; }
.distort-bg canvas { display:block; width:100%; height:100%; opacity:.62; }
/* Voile chaud : garde le motif lisible sans gêner la lecture du texte. */
.distort-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 8%,rgba(10,9,8,.18) 0%,rgba(10,9,8,.5) 48%,rgba(10,9,8,.84) 100%),linear-gradient(180deg,rgba(10,9,8,.1),rgba(10,9,8,.55)); }
.distort-bg.bg-fallback { background:repeating-radial-gradient(circle at 32% 38%,#0a0908 0 10px,#d8c3a5 10px 13px,#0a0908 13px 24px,#14110e 24px 30px); }
.distort-bg.bg-fallback canvas { display:none; }
#app { position:relative; z-index:1; }

/* ===== Direction artistique : noir, gris, blanc cassé, brun ===== */
:root {
  --bg:#0a0908; --surface:#14110e; --surface-2:#1b1713; --surface-3:#241f19;
  --line:#3b3229; --line-soft:#2b251e; --text:#f3eee5; --muted:#a89a8c;
  --purple:#8a5c39; --purple-2:#c49b6c; --cyan:#dcc6a6; --pink:#b37c50;
  --green:#9d9b74; --danger:#cf6b4b; --paper:#f3eee5; --ink:#0a0908;
  --brown:#6b4a31; --brown-light:#a9784a; --brass:#c9a26f;
  --shadow:0 22px 60px rgba(0,0,0,.55);
}
html { background:#0a0908; }
body { color:var(--text); background:#0a0908; }
body::selection { background:rgba(201,162,111,.35); color:#fff; }

/* Navigation et accueil */
.topbar { background:rgba(12,10,8,.78); border-bottom-color:rgba(201,162,111,.16); }
.top-nav button { color:#a89a8c; }
.top-nav button:hover,.top-nav .is-active { color:#f3eee5; }
.hero { border-color:rgba(201,162,111,.2); background:linear-gradient(120deg,rgba(24,19,15,.94) 0%,rgba(29,23,18,.9) 48%,rgba(43,34,26,.86) 100%); backdrop-filter:blur(6px); }
.hero h1 { color:#f5f0e7; }
.hero h1 em { color:var(--brass); }
.hero-copy { color:#c8b9a8; }
.orb-a { background:radial-gradient(circle at 35% 35%,#d8c3a5,transparent 16%),radial-gradient(circle at 55% 55%,#8a5c39 0%,#4a3423 42%,transparent 70%); opacity:.5; }
.orb-b { background:radial-gradient(circle,#dcc6a6,transparent 64%); opacity:.14; }
.card-one { background:rgba(28,23,18,.7); border-color:rgba(201,162,111,.28); }
.card-one span { color:var(--brass); }
.card-one small { color:#c9bbaa; }
.card-two { background:rgba(20,16,12,.8); border-color:rgba(201,162,111,.22); }
.card-two i { background:linear-gradient(90deg,#a9784a,#d8c3a5); }
.card-two i:nth-child(2) { background:linear-gradient(90deg,#8a5c39,#b37c50); }
.cut-mark { color:var(--brass); filter:drop-shadow(0 0 12px rgba(201,162,111,.45)); }
.eyebrow { color:var(--brass); }
.section-title h2 { color:#f3eee5; }
.project-thumb { background:linear-gradient(135deg,#2a2119,#14110e); border-color:var(--line); }
.project-thumb:hover { border-color:var(--brass); }
.project-shape { background:linear-gradient(135deg,#d8c3a5,#8a5c39 46%,#42352a); }
.shape-1 { background:linear-gradient(140deg,#c9a26f,#8a5c39,#5b4a3a); }
.shape-2 { background:linear-gradient(140deg,#b8b193,#6f6a57,#3f3a31); }
.shape-3 { background:linear-gradient(140deg,#a9784a,#8a5c39,#d8c3a5); }
.empty-projects { border-color:#4a3f33; background:linear-gradient(120deg,#15110d,#1a1510); }
.autocut-card { border-color:#4d3a28; background:linear-gradient(145deg,#2a1f16,#171310); }
.autocut-card::after { background:radial-gradient(circle,rgba(201,162,111,.4),transparent 65%); }
.autocut-card p { color:#c7b9a9; }
.pro-pill { color:#1a130d; background:linear-gradient(100deg,#d8c3a5,#c9a26f); }
.ai-icon { color:var(--brass); }
.local-card { border-color:var(--line-soft); background:#14110e; }
.template-card { background:linear-gradient(140deg,#17130f,#12100d); border-color:var(--line); }
.template-card:hover { border-color:var(--brass); }
.template-social::after { background:#8a5c39; }
.template-vlog::after { background:#6f6a57; }
.template-travel::after { background:#a9784a; }
.template-gaming::after { background:#4a4038; }
.template-icon { background:#2a231b; color:#e9dcc8; }

/* Boutons */
.primary-button { color:#fdf8f0; background:linear-gradient(120deg,#6d4830,#8a5c39 48%,#a9784a); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.primary-button:hover { filter:brightness(1.1); }
.small-primary { color:#fdf8f0; background:#8a5c39; }
.ghost-button { background:rgba(27,23,19,.72); border-color:var(--line); }
.ghost-button:hover { background:var(--surface-2); border-color:var(--brass); }
.dark-button { background:#12100d; border-color:rgba(201,162,111,.26); }
.text-button { color:#cdbfae; }
.text-button:hover { color:var(--brass); }
.avatar { border-color:var(--brass); background:linear-gradient(145deg,#8a5c39,#c9a26f); color:#1a130d; }

/* Éditeur */
.editor-shell { background:#090807; }
.editor-topbar { background:#110e0b; border-bottom-color:var(--line-soft); }
.editor-project-name input { color:#f5f0e7; }
.library,.inspector { background:#12100d; border-color:var(--line-soft); }
.library-tabs { background:#0d0b09; }
.library-tab.active { background:#2a2119; box-shadow:inset 2px 0 0 var(--brass); }
.editor-main { background:#0a0908; }
.preview-canvas { border-color:#3b3229; background:linear-gradient(140deg,#201a14,#0c0a08); box-shadow:0 18px 50px rgba(0,0,0,.62); }
.pv-box,.pv-edge,.pv-rot-stem { border-color:var(--brass); }
.pv-box { box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 18px rgba(201,162,111,.28); }
.pv-handle,.pv-edge { background:#0a0908; border-color:var(--brass); }
.pv-rot { background:#0a0908; border-color:var(--brass); color:var(--brass); }
.timeline-section { background:#110e0b; border-top-color:var(--line); }
.timeline-clip.video { background:linear-gradient(100deg,#5b3f2a,#8a5c39); }
.timeline-clip.overlay { background:linear-gradient(100deg,#4b4238,#756453); }
.timeline-clip.audio { background:linear-gradient(100deg,#454737,#6b6d52); }
.timeline-clip.text { background:linear-gradient(100deg,#7d5136,#b37c50); }
.timeline-clip.selected { box-shadow:0 0 0 1px var(--brass),0 0 12px rgba(201,162,111,.3); }
.playhead { background:#e0b68a; box-shadow:0 0 8px rgba(224,182,138,.65); }
.playhead i { background:#e0b68a; }
.track-lane { background:repeating-linear-gradient(90deg,transparent 0,transparent 73px,#211b15 74px); }
.track-label { background:#0e0c0a; }
.library-note { border-left-color:var(--brass); background:#1a1510; color:#c9bcac; }
.ratio-choice.selected { border-color:var(--brass); background:#2a2119; }
.modal { border-color:#4a3f33; background:linear-gradient(145deg,#1a1612,#110e0b); }
.modal-backdrop { background:rgba(5,4,3,.72); }
.export-choice { border-color:#4a3f33; background:#15110d; }
.progress-fill { background:linear-gradient(90deg,#8a5c39,#d8c3a5); }
.toast { border-color:#5a4a39; background:#1d1712; color:#f0e6d7; }
.toast .icon { color:var(--brass); }

/* Merch */
.merch-block { background:linear-gradient(135deg,#1a1510,#0b0908); border-color:rgba(201,162,111,.28); }
.merch-block h2 { color:#f5f0e7; }
.merch-block p { color:#b7a795; }

/* Barres de défilement */
* { scrollbar-color:#4a3f33 #12100d; scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#12100d; }
::-webkit-scrollbar-thumb { background:#3b3229; border:2px solid #12100d; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#5a4a39; }

@media (prefers-reduced-motion:reduce){ .distort-bg canvas { opacity:.5; } }
@media (max-width:780px){ .distort-bg canvas { opacity:.5; } }

/* AI VIDEO GENERATOR */
.ai-video-button { gap: 8px; }
.ai-video-button small { font-size: 11px; font-weight: 500; opacity: .62; }
.ai-modal { max-width: 560px; }
.ai-sub { color: var(--muted, #9a9a9a); margin: 0 0 18px; line-height: 1.5; }
.ai-modal textarea { width: 100%; resize: vertical; min-height: 96px; font: inherit; line-height: 1.45; }
.ai-durations { flex-wrap: nowrap; }
.ai-durations .ratio-choice { flex: 1; }
.ai-quota { font-size: 13px; color: var(--muted, #9a9a9a); margin: 14px 0; }
.ai-progress, .ai-result, .ai-error { margin-top: 16px; }
.ai-progress p { margin: 8px 0 0; font-size: 14px; }
.ai-progress small { display: block; margin-top: 8px; color: var(--muted, #9a9a9a); }
.ai-result video { width: 100%; border-radius: 14px; background: #000; display: block; }
.ai-result p { font-size: 14px; margin: 10px 0 0; color: var(--muted, #9a9a9a); }
.ai-result-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ai-error p { color: #ff9b9b; margin: 0 0 12px; }