/* Shared visual system. Canvas pixels and print dimensions are intentionally separate. */
:root{--moss:#023431;--cream:#ffefaa;--paper:#fffdf5;--surface:#fff;--muted:#526963;--line:#d8e0d8;--focus:#8c7428;--soft:#f5f3e8;--stage:#e8ede7;--radius:16px;--gutter:clamp(16px,3vw,48px);color:var(--moss);background:var(--paper);font-family:'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.45;color-scheme:light}
body{min-width:280px}button,input,select,textarea{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,input{max-width:100%}button,select{min-height:44px;font-size:.875rem;border-radius:10px;border-color:var(--line)}button{line-height:1.35;padding:10px 16px;transition:background-color .15s,border-color .15s}button:hover:not(:disabled){background:var(--soft);border-color:#8fa8a0}button:disabled{opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}input[type=range],input[type=checkbox]{accent-color:var(--moss)}input[type=range]{min-height:32px;cursor:pointer}select{background:#fffef9;padding-right:28px}input:not([type=range]):not([type=checkbox]):not([type=file]):not([type=color]){color:var(--moss);background:white;border:1px solid var(--line);border-radius:10px;min-height:44px}summary{min-height:44px;align-content:center;cursor:pointer}h1,h2,h3{color:var(--moss);line-height:1.2}p{line-height:1.55}.primary,.phototools .edit-photo-button{background:var(--moss);color:var(--cream);border-color:var(--moss)}.primary:hover:not(:disabled),.phototools .edit-photo-button:hover{background:#0b514a;color:var(--cream);border-color:#0b514a}button.danger{color:#963c32;border-color:#e4c9c1;background:#fffdfb}button.danger:hover:not(:disabled){background:#fff0e8;border-color:#cb9f93}
header{min-height:84px;height:auto;padding:16px max(var(--gutter),calc((100vw - 1392px)/2));gap:24px;background:var(--moss);border:0;color:var(--cream)}.brand{font-size:1.25rem;letter-spacing:-.3px;gap:12px;flex-shrink:0}.brand small{font-size:.75rem;letter-spacing:1.2px;color:#deddb5;margin-top:3px}.logo{display:flex;align-items:center;justify-content:center;width:44px;height:48px;padding:0;background:var(--cream);color:var(--moss);border-radius:12px;font-size:30px}#saveStatus{color:#d6e0cf;font-size:.8125rem;line-height:1.4}#accountButton{background:transparent;color:var(--cream);border-color:#54736a;min-height:40px}#accountButton:hover{background:#134641;border-color:var(--cream)}
.workspace-tabs{max-width:1488px;padding:18px var(--gutter) 0;gap:8px;align-items:stretch;flex-wrap:wrap}.workspace-tabs a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:12px;font-size:.9375rem;color:var(--moss);border:1px solid transparent;line-height:1.35}.workspace-tabs a[aria-current]{background:var(--cream);color:var(--moss);border-color:#ecdda0}.workspace-tabs a:hover{background:#f4edcf;box-shadow:none}.workspace-tabs #cloudButton{background:transparent;border-color:var(--line);font-size:.875rem;margin-left:auto}#converterTab[aria-disabled=true]{background:#efeee6;color:#61726b;border-color:transparent;gap:1px}#converterAvailability{font-size:.75rem}
main{max-width:1488px;padding:28px var(--gutter) 24px}.top,#templatesPage>.top{margin-bottom:26px;gap:20px;align-items:center}.top>div{min-width:0}.top h1,#templatesPage>.top h1{font-size:clamp(1.375rem,2.1vw,1.875rem);font-weight:650;line-height:1.3;letter-spacing:-.6px;max-width:640px;margin:0}.top p:last-child{font-size:.9375rem;color:var(--muted);margin-top:8px}.top>button{flex-shrink:0}.eyebrow{font-size:.75rem;letter-spacing:1.4px;color:var(--muted)}.workspace{grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.library{min-width:0}.sectionhead{gap:8px;margin-bottom:16px}.sectionhead h2{font-size:1.0625rem}.sectionhead h2 span{background:var(--cream);color:var(--moss);font-size:.8125rem;padding:4px 9px;border-radius:7px}.sectionhead>button{font-size:.8125rem;padding:8px 12px;min-height:40px}
:is(#drop,#convertDrop){min-height:240px;border:1.5px dashed #a5b9ac;border-radius:20px;background:var(--surface);gap:8px;padding:28px 20px;transition:border-color .15s,background-color .15s}:is(#drop,#convertDrop):hover,:is(#drop,#convertDrop).over{background:#fffbed;border-color:var(--moss)}:is(#drop,#convertDrop).over{outline-color:var(--moss)}:is(#drop,#convertDrop) .upload{width:64px;height:64px;border-radius:18px;background:var(--cream);border:0;color:var(--moss);margin-bottom:8px}:is(#drop,#convertDrop) .upload svg{width:46px;height:46px}:is(#drop,#convertDrop)>strong{font-size:1rem}:is(#drop,#convertDrop)>span:not(.upload){font-size:.875rem;color:var(--muted)}:is(#drop,#convertDrop) small{color:var(--muted);font-size:.75rem;letter-spacing:.3px;margin-top:8px}:is(#drop,#convertDrop).compact{min-height:104px;padding:16px;margin-bottom:16px}
aside,.id-settings{border:1px solid var(--line);border-top:4px solid var(--cream);border-radius:var(--radius);padding:22px;background:var(--surface);box-shadow:0 3px 14px #02343105}aside h2{font-size:1.25rem}aside>.eyebrow{margin-bottom:10px}aside>.muted{margin:8px 0 14px}aside label{margin:18px 0 8px;font-size:.875rem}.card-format dl,.specs div{font-size:.8125rem}.card-format .muted{font-size:.8125rem}.card-format .note{font-size:.8125rem;margin-bottom:14px}.muted{font-size:.875rem;color:var(--muted)}.note,.privacy,.privacy p,.loading-note{font-size:.8125rem;line-height:1.55;color:var(--muted)}.note{margin:14px 0 18px}.privacy{border-color:var(--line);padding-top:16px}.privacy strong{color:var(--moss)}.export-details{margin:16px 0 0;padding:8px 0;border-color:var(--line)}.specs div{gap:5px 14px}.specs b{overflow-wrap:anywhere}.print-summary{background:var(--soft);border:0;border-radius:12px;padding:12px 14px;margin:14px 0}.print-summary dl>div{margin:7px 0;font-size:.875rem}.print-summary dl>div:nth-child(-n+2){font-size:.9375rem}.print-summary dd{color:var(--moss)}.print-summary .sheet-breakdown{border-color:var(--line);padding-top:9px}.print-summary p{font-size:.75rem;margin-top:10px}.card-format{border-color:var(--line)}
#grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);padding:12px;border-radius:var(--radius);box-shadow:0 2px 8px #02343105}.card canvas{background:white}.cardhead{margin:12px 0;font-size:.875rem;gap:8px}.cardhead span{font-size:.8125rem}.card button{font-size:.875rem}.transfer-help{font-size:.875rem;color:var(--muted);margin:12px 0}.card .photo-target:focus-visible{outline-color:var(--focus)}.card .photo-target.transfer-source,.card .photo-target.transfer-over{border-color:var(--moss)}footer{margin-top:32px;padding-top:18px;font-size:.75rem;color:var(--muted);border-color:var(--line)}
dialog{color:var(--moss);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;max-height:94dvh;box-shadow:0 24px 90px #02343140}dialog::backdrop{background:#012825a8;backdrop-filter:blur(3px)}.dialoghead{background:var(--surface);border-color:var(--line);top:-24px;padding:12px 0;gap:12px}.dialoghead h2{font-size:1.375rem}.dialoghead .eyebrow{margin-bottom:5px}.dialoghead button{min-height:44px}.template-nav{gap:8px}.template-nav span{color:var(--muted)}.photo-editor-heading h2{font-size:1.375rem}.photo-editor-heading p{color:var(--muted)}.phototools{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px}.phototools button{font-size:.875rem;min-height:40px;padding:8px 10px}.phototools label{font-size:.875rem}.phototools strong{font-size:.875rem}.photo-preview-stage,.background-stage,.id-crop-stage{background:var(--stage);border-radius:12px}.photo-editor-controls label,.photo-editor-controls output{font-size:.875rem}.photo-editor-controls input{accent-color:var(--moss)}.photo-editor-actions{border-top:1px solid var(--line);padding-top:14px;gap:10px}.photo-editor-actions button{min-width:124px}#editor{width:min(1180px,96vw)}#editor .crop-stage{background:var(--stage);border-radius:12px}#editCanvas{border-color:var(--line)}#photoTools{gap:14px}.dialogbottom{gap:10px}.dialogbottom button{font-size:.875rem}.mobile-editor-footer{background:white}#toast{background:var(--moss);color:var(--cream);border:1px solid #44665b;border-radius:12px;bottom:calc(18px + env(safe-area-inset-bottom))}
.frame-choice{border-radius:10px;font-size:.8125rem}.frame-choice[aria-pressed=true]{background:var(--cream);border-color:var(--moss);box-shadow:0 0 0 1px var(--moss)}.frame-category>summary,#framePicker .frame-category>summary{font-size:.875rem;padding:12px 2px}.frame-category-count{font-size:.75rem;background:var(--soft);color:var(--muted)}.frame-category:has(.frame-choice[aria-pressed=true]) .frame-category-count{background:var(--moss);color:var(--cream)}.frame-design .muted,.frame-design .note{font-size:.8125rem}.frame-catalog-title{font-size:.75rem}.frame-category,.frame-category:last-child{border-color:var(--line)}#customFrameActions button{font-size:.875rem;min-height:44px}#framePicker .frame-gallery{gap:10px}#framePicker .frame-choice{font-size:.8125rem}.background-stage p{font-size:.8125rem;color:var(--muted)}
.convert-row{border-color:var(--line);border-radius:14px;padding:14px;gap:14px}.convert-file-info strong{font-size:.875rem}.convert-file-info .muted,.convert-state,.convert-error{font-size:.8125rem}.convert-support{font-size:.875rem;color:var(--muted)}#convertSettings .check-label{font-size:.8755rem}#convertFormatNote{font-size:.8125rem}#loadingDialog{border-top:5px solid var(--cream);border-radius:20px}#loadingDialog::backdrop{background:#01282580;backdrop-filter:grayscale(.6) blur(2px)}.loading-spinner{border-color:#e8e4cf;border-top-color:var(--moss)}#loadingDetail{color:var(--muted)}
.storage-summary{background:var(--soft);border-color:var(--line);border-radius:12px}.cloud-project{border-color:var(--line);border-radius:12px}.cloud-project>small{font-size:.8125rem;color:var(--muted)}#cloudContent>button{width:100%;padding:14px;overflow-wrap:anywhere}#cloudContent h3{font-size:1.125rem;margin-top:24px}#accountIdentity{overflow-wrap:anywhere}#submitDialog>p{font-size:.875rem;color:var(--muted)}#submitForm .consent{font-size:.875rem}#accountForm input,#submitForm input:not([type=checkbox]){font-size:1rem}
.id-workspace{grid-template-columns:minmax(0,1fr) 340px;gap:24px}.id-settings input:not([type=checkbox]),.id-settings select{border-color:var(--line);font-size:.875rem;min-height:44px}.id-settings label{font-size:.875rem}.id-settings .note,.id-editor-tools .note{font-size:.8125rem}.id-settings details{padding-top:8px;border-color:var(--line)}.id-actions span{color:var(--muted)}#idPaperWrap{background:var(--stage);border-radius:18px;padding:24px}#idPhotoStatus{background:var(--cream);color:var(--moss);font-size:.875rem}#idEditor{border-radius:20px}#idEditor .id-editor-tools input[type=range]{accent-color:var(--moss)}#idEditor .id-editor-tools input[type=color]{border-color:var(--line)}#idEditor .id-editor-tools>label{font-size:.875rem}#idEditorStatus{color:var(--muted)}
@media(min-width:901px){.workspace>aside{position:sticky;top:18px}#editor[open]{display:flex;flex-direction:column;overflow:hidden}#editor .dialoghead{position:static;flex-shrink:0}#editor #cropHint{margin:10px 0;font-size:.875rem}#editor .crop-stage{min-height:120px;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}#editor #editCanvas{width:auto;height:auto;max-height:46dvh;max-width:100%;object-fit:contain}#editor .editor-controls-scroll{flex:0 1 auto;overflow:auto;min-height:90px;max-height:32dvh}#photoEditor,#backgroundEditor{width:min(1160px,96vw)}#idEditor .id-crop-stage{min-height:0}#idCrop{max-height:65dvh}}
@media(max-width:1100px) and (min-width:901px){.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:20px}#grid{grid-template-columns:1fr}.brand small{font-size:.6875rem}header{gap:16px}.sectionhead h2{flex-basis:100%}}
@media(max-width:900px){.workspace,.id-workspace{grid-template-columns:1fr}.workspace>aside{position:static}.top,#templatesPage>.top{flex-direction:row;align-items:center}.top h1,#templatesPage>.top h1{font-size:1.5rem;max-width:520px}aside{padding:20px}.id-settings{padding:20px}header{gap:16px}.brand small{display:none}#saveStatus{font-size:.75rem}.workspace-tabs a{padding:10px 14px}#editor .dialoghead{gap:8px}#editor .dialoghead h2{font-size:1.25rem}}
@media(max-width:700px){header{padding:14px 16px 10px;gap:10px;min-height:78px}.brand{font-size:1.0625rem;gap:9px}.logo{width:36px;height:40px;border-radius:10px;font-size:26px}#saveStatus{order:3;flex-basis:100%;margin:0;font-size:.75rem}#accountButton{font-size:.8125rem;min-height:40px;padding:8px 10px;margin-left:auto}.workspace-tabs{padding:14px 16px 0;gap:7px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-tabs a{min-height:48px;font-size:.875rem;padding:9px 8px}.workspace-tabs #cloudButton{margin:0;width:100%;font-size:.8125rem;padding:8px;min-height:44px}body.customer-mode .workspace-tabs #cloudButton{grid-column:1/-1;min-height:40px;background:transparent;border-style:dashed}main{padding:22px 16px 20px}.top,#templatesPage>.top{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:22px}.top h1,#templatesPage>.top h1{font-size:1.375rem;line-height:1.3;letter-spacing:-.4px}.top>button{width:100%}.top .eyebrow{margin-bottom:8px}.top p:last-child{font-size:.875rem}.sectionhead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:12px}.sectionhead h2{grid-column:1/-1;margin:0 0 4px}.sectionhead>button{font-size:.8125rem;padding:8px 5px;min-height:42px}.workspace{gap:20px}#grid{grid-template-columns:1fr;gap:16px}:is(#drop,#convertDrop){min-height:212px;border-radius:16px;padding:22px 16px}:is(#drop,#convertDrop).compact{min-height:100px}:is(#drop,#convertDrop)>strong{font-size:.9375rem}:is(#drop,#convertDrop)>span:not(.upload){font-size:.8125rem}aside,.id-settings{padding:18px;border-radius:16px}.card-format dl div{gap:10px}.card{padding:12px}.transfer-help{font-size:.8125rem;line-height:1.5}.print-summary{padding:12px 14px}footer{margin-top:26px}dialog{padding:18px;border-radius:18px}.dialoghead{top:-18px}.dialoghead h2{font-size:1.25rem}.dialoghead button{font-size:.875rem;padding:9px 12px}#editor,#photoEditor,#framePicker{border:0;border-radius:0}#editor{width:100vw}#editor .phototools{background:var(--soft);padding:12px}#editor .phototools strong{font-size:.8125rem}#editor .crop-stage{background:var(--stage)}#editor .mobile-editor-footer{border-color:var(--line)}#cropEyebrow{font-size:.75rem}#cropHint{font-size:.8125rem}#editor .dialoghead>button{font-size:.8125rem}#editor .dialogbottom button{font-size:.8125rem}.photo-editor-heading h2{font-size:1.25rem}.photo-editor-heading p{font-size:.8125rem}#photoEditor .photo-editor-actions{padding-top:10px}#framePicker .dialoghead{top:-14px}#backgroundEditor{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;border:0;padding:14px 14px calc(12px + env(safe-area-inset-bottom))}.background-stage p{font-size:.75rem}#accountDialog,#submitDialog,#cloudDialog{padding:18px;width:calc(100vw - 24px);max-height:94dvh}#accountDialog h2,#submitDialog h2,#cloudDialog h2{font-size:1.25rem}#accountDialog .dialoghead,#submitDialog .dialoghead,#cloudDialog .dialoghead{gap:8px}#idEditor{border:0;border-radius:0}.id-actions{gap:8px}.id-actions button{flex:1}.id-actions span{flex-basis:100%;font-size:.8125rem}#idPaperWrap{padding:14px}.id-settings .id-actions button{min-height:44px}.id-settings .id-actions span{font-size:.8125rem}}
@media(max-width:380px){.brand{font-size:.9375rem}.brand .logo{width:32px}#accountButton{font-size:.75rem;padding:8px}.sectionhead>button{font-size:.75rem}.top h1,#templatesPage>.top h1{font-size:1.25rem}.id-two{gap:8px}.photo-editor-actions button{min-width:0}}
button{font-weight:600}.print-notes{border-top:1px solid var(--line);margin-top:16px;padding-top:5px}.print-notes>summary{font-size:.875rem;font-weight:600}.print-notes .privacy{padding-top:12px}.print-notes .note{margin:10px 0 14px}.print-notes .privacy p{margin-top:6px}.workspace>aside>.card-format>label:first-child{margin-top:18px}
@media(prefers-reduced-motion:reduce){button,:is(#drop,#convertDrop){transition:none}}

.brand .logo img{display:block;width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}