/* Nogoft — Stage 5. Mobile-first. Design tokens from approved Persian palette. */
:root{--n-bg:#F8F7F5;--n-primary:#748C8B;--n-logo:#7C8F82;--n-ink:#15232D;--n-muted:#76848C;--n-card:#F3F3F1;--n-chip:#EBEEEC;--n-rule:#DDE1DE;--n-paper:#fff;--n-red:#B24747}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--n-bg);color:var(--n-ink);font-family:"Vazirmatn","IRANSans",Tahoma,sans-serif;font-size:14px;line-height:1.75;margin:0}
a{color:inherit;text-decoration:none}a:hover{color:var(--n-primary)}
button,input,textarea{font:inherit}button{cursor:pointer}
.app-frame{max-width:480px;min-height:100dvh;margin:0 auto;background:var(--n-bg);box-shadow:0 0 60px rgba(37,52,48,.025);position:relative}
.app-frame button{margin:0;width:auto;font-weight:inherit;display:inline-flex;text-align:center;align-items:center;justify-content:center}
.app-header{height:83px;padding:20px 21px 11px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wordmark{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--n-ink);font-size:24px;line-height:1.2}
.wordmark img{object-fit:contain;width:41px;height:41px;mix-blend-mode:multiply}
.header-side{min-width:40px;display:flex;justify-content:flex-end}
.icon-link{width:42px;height:42px;display:grid;place-items:center;color:var(--n-ink)}.icon-link svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.page-body{padding:0 20px 105px;min-height:calc(100dvh - 84px)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-around;background:rgba(248,247,245,.96);border-top:1px solid var(--n-rule);padding:8px 4px calc(9px + env(safe-area-inset-bottom));z-index:25;backdrop-filter:blur(10px);box-shadow:0 -4px 20px rgba(12,34,25,.035)}
.nav-link{min-width:76px;display:flex;flex-direction:column;align-items:center;gap:0;color:#7E8D91;font-size:12px;line-height:1.5}
.nav-link svg{height:25px;width:25px;fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round;stroke-width:1.9}
.nav-link.current{color:var(--n-ink);font-weight:750}.nav-link.current svg{stroke:var(--n-ink)}
.nav-link.current::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--n-primary)}
.flash-messages{padding:3px 20px}.flash{padding:10px 14px;margin:6px 0;border:1px solid var(--n-rule);background:#fff8e6;border-radius:13px}.flash.success{background:#edf5ee;color:#426e60}.flash.error{background:#ffeded;color:#9e4646}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Home */
.welcome-heading{margin:0 0 18px}.welcome-heading h1{font-size:19px;line-height:1.54;letter-spacing:-.35px;font-weight:800;margin:3px 0 2px;transform:none}.welcome-heading h1 span{font-size:16px;font-weight:700}
.brush-stroke{height:3px;width:48px;background:var(--n-primary);border-radius:100%;transform:rotate(-7deg);margin:6px 0 0 auto}
.discover-prompt{display:flex;align-items:flex-start;gap:12px;min-height:96px;padding:15px;background:var(--n-card);border:1px solid var(--n-rule);border-radius:18px}
.discover-prompt .sparkle{font-size:25px;line-height:1;color:var(--n-ink)}.discover-prompt>span:last-child{display:flex;flex-direction:column;gap:4px;text-align:right;min-width:0}.discover-prompt strong{font-size:15px}.discover-prompt small{font-size:11px;line-height:1.9;color:var(--n-muted)}
.home-section{margin:23px 0 30px}.section-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;gap:8px}
.section-top h2{font-weight:800;font-size:16px;display:flex;gap:7px;align-items:center;margin:0}.section-icon{font-size:20px;font-weight:400;color:var(--n-ink)}.section-top>a{font-size:11px;color:var(--n-muted);white-space:nowrap}.section-top>a span{font-size:17px}
.compact-story{position:relative;background:var(--n-card);border:1px solid #E3E6E3;border-radius:16px;display:flex;gap:11px;padding:9px;margin:10px 0;min-height:108px}
.thumb-link{height:89px;width:89px;flex:none;border-radius:11px;overflow:hidden;background:var(--n-chip)}.thumb-link img,.feed-cover img,.popular-thumb img,.writer-avatar img,.member-avatar img,.profile-photo img,.mini-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.no-cover{width:100%;height:100%;display:grid;place-items:center;font-size:42px;color:var(--n-logo);background:linear-gradient(135deg,#dce4de,#f3eeee)}
.story-copy{flex:1;min-width:0;text-align:right;padding-top:1px}.story-title{font-size:13px;font-weight:800;display:block;line-height:1.5}.story-copy>p{color:var(--n-muted);font-size:11px;line-height:1.75;margin:5px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-meta{font-size:10px;color:var(--n-muted);display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.story-count{position:absolute;bottom:9px;left:9px;display:flex;gap:4px;align-items:center;color:var(--n-muted);font-size:10px}.story-count svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none}
.popular-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.popular-card{position:relative;background:var(--n-card);border:1px solid #E8EAE7;border-radius:17px;min-height:174px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 5px 8px;text-align:center;min-width:0}
.popular-thumb{display:block;width:70px;height:70px;overflow:hidden;border-radius:13px;background:var(--n-chip)}.popular-card strong{font-size:10px;line-height:1.5;min-height:17px}.popular-card small{font-size:10px;color:var(--n-muted)}.popular-like{font-size:10px;color:var(--n-muted);margin-top:auto}.rank{position:absolute;top:7px;right:7px;background:#D4DFDA;color:#476159;width:19px;height:19px;border-radius:50%;font-size:10px;line-height:19px}
.writer-strip{display:flex;gap:13px;justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:0 0 6px}.writer-strip::-webkit-scrollbar{display:none}.writer-chip{flex:0 0 65px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:3px}.writer-avatar{height:48px;width:48px;background:linear-gradient(140deg,#d5dfd9,#8ba39a);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:19px;overflow:hidden}.writer-chip strong{font-size:10px;white-space:nowrap;max-width:82px;overflow:hidden;text-overflow:ellipsis}.writer-chip small{color:var(--n-muted);font-size:10px}
/* Shared lists, search, chips */
.page-title-row{display:flex;align-items:center;gap:12px;margin:8px 0 17px}.page-title-row>div{flex:1}.page-title-row h1{font-size:20px;margin:0;font-weight:800}.page-title-row p{margin:1px 0 0;color:var(--n-muted);font-size:11px}.back-chevron{font-size:35px;color:var(--n-ink);line-height:1;display:grid;place-items:center;height:37px;width:31px;order:1}
.sort-scroll{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:9px 0 14px;padding-bottom:2px}.sort-tab{white-space:nowrap;flex:1 0 auto;border:1px solid var(--n-rule);border-radius:13px;background:var(--n-chip);padding:9px 14px;text-align:center;color:var(--n-muted);font-size:11px}
.sort-tab.active{color:white;background:var(--n-primary);border-color:var(--n-primary);font-weight:700}
.feed-search,.search-form{display:flex;align-items:center;flex-direction:row-reverse;position:relative;background:var(--n-card);border:1px solid var(--n-rule);border-radius:15px;padding:3px 10px;margin:0 0 16px}.feed-search input,.search-form input{width:100%;border:0;background:transparent;outline:none;padding:10px;color:var(--n-ink);text-align:right;font-size:12px;min-width:0;box-shadow:none}.feed-search button,.search-form button{border:0;color:var(--n-ink);background:transparent;font-size:26px;width:36px;height:33px;flex:none}
.feed-stack{display:flex;flex-direction:column;gap:9px}.feed-card{display:flex;gap:11px;padding:9px;border-radius:17px;background:var(--n-card);border:1px solid var(--n-rule);min-height:110px;align-items:center}
.feed-cover{height:95px;width:95px;flex:none;overflow:hidden;border-radius:12px;background:#e5e9e6}.feed-copy{flex:1;min-width:0;position:relative;align-self:stretch;padding-top:3px}.feed-title{font-size:13px;font-weight:800;display:block;line-height:1.6}.feed-copy>p{font-size:11px;color:var(--n-muted);margin:4px 0 12px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-meta{display:flex;gap:6px;font-size:10px;color:var(--n-muted);flex-wrap:wrap}.feed-likes{position:absolute;bottom:1px;left:0;color:var(--n-muted);font-size:11px}.feed-empty{width:100%;border:1px dashed var(--n-rule);padding:22px 12px;border-radius:16px;background:var(--n-card);color:var(--n-muted);text-align:center;font-size:12px}.pager{display:flex;justify-content:center;align-items:center;gap:17px;color:var(--n-muted);margin:20px auto;font-size:12px}.pager a{background:var(--n-chip);padding:6px 15px;border-radius:10px;color:var(--n-ink)}
.search-page>.page-title-row{margin-top:6px}.search-form{margin-top:10px}.search-hints{margin:17px 0 22px}.search-hints h2,.result-heading{font-size:14px;margin:13px 0 8px}.chip-strip{display:flex;flex-wrap:wrap;gap:8px}.chip-strip a{background:var(--n-chip);padding:7px 14px;border-radius:20px;color:#47625b;font-size:11px}
.search-tabs{display:flex;justify-content:flex-start;gap:18px;margin:0 0 16px;border-bottom:1px solid var(--n-rule)}.search-tabs a{padding:5px 12px;color:var(--n-muted);font-size:12px}.search-tabs a.active{color:#45655b;border-bottom:3px solid var(--n-primary);font-weight:800}
.author-results{display:flex;flex-direction:column;gap:6px}.author-result{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--n-rule);border-radius:14px;background:var(--n-card)}.author-result>span:nth-child(2){flex:1}.author-result strong,.author-result small{display:block}.author-result strong{font-size:13px}.author-result small{font-size:10px;color:var(--n-muted)}.chevron-muted{color:var(--n-muted);font-size:25px}
/* Profile */
.profile-page{margin-top:4px}.profile-card{background:var(--n-card);border:1px solid var(--n-rule);border-radius:20px;padding:18px 13px 10px}.profile-id{display:flex;gap:12px;align-items:center}.profile-photo{width:86px;height:86px;border-radius:50%;background:linear-gradient(140deg,#a1b3aa,#6f8d85);overflow:hidden;flex:none;display:grid;place-items:center;color:white;font-size:30px}.profile-intro{flex:1;min-width:0}.profile-intro h1{font-size:20px;margin:0 0 5px}.profile-intro p{font-size:12px;color:var(--n-muted);line-height:1.85;margin:0}.profile-buttons{display:flex;align-items:center;gap:8px;margin-top:16px}.profile-buttons form{margin:0;flex:1}.main-button{background:var(--n-primary);color:#fff;display:inline-flex;justify-content:center;align-items:center;padding:11px 17px;border-radius:13px;border:0;font-size:13px;white-space:nowrap}.profile-buttons>.main-button{flex:1}.profile-buttons form>.main-button{width:100%}.profile-buttons .share-small,.profile-buttons .small-neutral{width:43px;height:43px;border:1px solid var(--n-rule);border-radius:12px;background:var(--n-chip);color:#39534d;font-size:23px;flex:none;display:inline-grid;place-items:center}
.compact-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0;border-top:1px solid var(--n-rule);border-radius:0;background:none;padding:15px 2px 6px;margin:15px 0 0;box-shadow:none;gap:0;min-height:56px}.compact-stats>div,.compact-stats>a{display:flex;flex-direction:column;text-align:center;gap:0;font-size:12px;border:0;color:var(--n-ink);min-width:0}.compact-stats>*+*{border-right:1px solid var(--n-rule)}.compact-stats strong{font-size:18px;line-height:1.3}.compact-stats span{color:var(--n-muted);font-size:10px}.section-below{margin-top:24px}.profile-switch{display:flex;gap:5px;background:var(--n-card);border:1px solid var(--n-rule);padding:3px;border-radius:13px;margin-bottom:12px}.profile-switch a{flex:1;text-align:center;padding:8px 5px;font-size:11px;color:var(--n-muted);border-radius:11px}.profile-switch a.active{color:#fff;background:var(--n-primary);font-weight:750}
.user-card{display:flex;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--n-rule);border-radius:15px;background:var(--n-card);margin:8px 0}.user-card .member-info{flex:1;min-width:0}.member-avatar{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:#dbe4df;flex:none;color:#48645a;font-weight:700;overflow:hidden}.user-card .member-info strong{color:var(--n-ink);font-size:12px}.user-card .member-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;color:var(--n-muted)}.user-card form{margin:0}.small-follow{border:1px solid #B8C9C3;background:var(--n-primary);color:white;border-radius:12px;padding:8px;font-size:10px!important;white-space:nowrap;max-width:95px}.small-follow.is-active{color:#47645b;background:#EBEEEC}
/* Reading */
.read-page{padding-top:4px}.page-backline{display:flex;justify-content:space-between;align-items:center;margin:0 0 15px;color:var(--n-muted)}.page-backline .back-chevron{order:0;margin-inline-end:auto}.subtle-icon{width:30px;height:30px;background:none;border:0;color:var(--n-muted);font-size:20px}.notice-banner{padding:12px 15px;background:#fff8e6;border:1px solid #e3dcb4;border-radius:12px;margin:12px 0;font-size:12px}.notice-banner p{margin:3px 0}
.reading-intro{display:flex;gap:12px;align-items:stretch;min-height:167px}.intro-copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}.mini-author{display:flex;align-items:center;gap:7px}.mini-avatar{border-radius:50%;background:#dce8dc;color:#57766c;display:grid;place-items:center;width:33px;height:33px;overflow:hidden;flex:none}.mini-author strong{font-size:11px;display:block}.mini-author small{font-size:9px;display:block;color:var(--n-muted)}.intro-copy h1{font-size:18px;margin:7px 0 0}.intro-copy>p{margin:0;color:var(--n-muted);font-size:11px;line-height:1.9}.read-cover{width:40%;max-width:170px;aspect-ratio:1/1;border-radius:14px;object-fit:cover;flex:none;align-self:flex-start;overflow:hidden}.read-body{border-top:1px solid var(--n-rule);border-bottom:1px solid var(--n-rule);padding:22px 1px;margin:18px 0 12px;color:var(--n-ink);font-size:14px;line-height:2.35;text-align:justify;overflow-wrap:anywhere}.read-body p{margin:0 0 1.35em}.read-body p:last-child{margin-bottom:0}
.read-engagement{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:10px 0 23px}.read-engagement form{margin:0}.engage-control{padding:5px!important;background:none;border:0;color:#607479;display:flex;gap:5px;font-size:19px}.engage-control span:last-child:not(.sr-only){font-size:11px}.engage-control.is-active{color:var(--n-primary)}.read-views{color:var(--n-muted);font-size:11px;margin-inline-start:auto}.small-login-link{font-size:11px;color:var(--n-primary)}
.gentle-tip{display:flex;gap:14px;align-items:center;padding:14px;background:var(--n-chip);border-radius:17px}.tip-leaf{font-size:29px;color:var(--n-primary)}.gentle-tip div{flex:1}.gentle-tip strong{font-size:13px}.gentle-tip p{font-size:11px;margin:0;color:var(--n-muted)}.tip-heart{display:grid;place-items:center;color:white;background:var(--n-primary);height:36px;width:36px;border-radius:50%;font-size:23px}.writer-actions{display:flex;gap:10px;margin-top:20px}.writer-actions>*{flex:1}.danger-button{color:var(--n-red);border:1px solid #d7acac;background:#fff2f1;padding:11px 16px;border-radius:12px;display:inline-flex;justify-content:center}
.manage-card .manage-actions{display:flex;gap:14px;font-size:11px;color:var(--n-primary);margin-top:3px}.manage-card .manage-actions a:last-child{color:var(--n-red)}.create-link{display:flex;margin:14px 0 18px;max-width:200px}
/* Edit profile */
.edit-profile-form{margin-top:10px}.edit-profile-cover{height:158px;border-radius:15px;position:relative;overflow:hidden;background:var(--n-chip)}.edit-profile-cover>img,.cover-gradient{width:100%;height:100%;object-fit:cover}.cover-gradient{background:linear-gradient(145deg,#748c8b,#e2c4bb 72%,#dfb1a0)}.edit-profile-cover>label{position:absolute;left:11px;bottom:10px;margin:0;background:rgba(41,53,49,.52);color:white;padding:6px 14px;border-radius:10px;cursor:pointer;font-size:11px}.edit-avatar-box{display:flex;flex-direction:column;align-items:center;margin:-36px 0 20px;position:relative}.edit-avatar-box .profile-photo{border:4px solid var(--n-bg);width:84px;height:84px}.edit-avatar-box>label{cursor:pointer;color:var(--n-muted);font-size:11px;margin:4px}.hidden-upload{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.edit-field{display:block;margin:15px 0}.edit-field>strong{display:block;margin-bottom:5px}.edit-field input,.edit-field textarea{width:100%;text-align:right;resize:vertical;display:block;background:var(--n-card);border:1px solid var(--n-rule);border-radius:12px;padding:12px;color:var(--n-ink);outline:none}.edit-field small{display:block;color:var(--n-muted);font-size:11px}.profile-save{width:100%;margin:18px 0}
/* Old template widgets integrated into new shell */
.editor-shell,.posts-shell,.reading-panel,.social-shell{max-width:100%;margin:10px auto 24px}.editor-shell .editor-top .back-link{margin:0}.editor-form .field,.editor-form .cover-section{background:var(--n-card);border-color:var(--n-rule)}.editor-shell .field input,.editor-shell .field textarea{background:var(--n-bg);border-color:var(--n-rule)}.editor-shell .cover-preview{width:min(100%,200px);aspect-ratio:1}.editor-form .update-button{background:var(--n-primary)}
.bell-trigger{background:transparent;border:0;border-radius:12px;width:42px;height:42px;color:var(--n-ink)}.bell-panel{width:min(345px,calc(100vw - 32px));top:calc(100% + 6px);left:0}.bell-title button{padding:0}.bell-item-button{display:flex!important;width:100%!important;margin:0!important;justify-content:flex-start!important;padding:10px!important}.read-all-form button{width:100%!important;padding:8px!important;border-radius:0!important}.bell-trigger .bell-dot{left:7px}
.panel{margin:12vh auto 0;max-width:370px}.panel button.primary{background:var(--n-primary);color:white;width:100%;padding:12px;border-radius:13px;margin-top:20px}.panel .illustration{background:var(--n-chip);color:var(--n-primary)}.panel input{width:100%;background:var(--n-card);border-color:var(--n-rule)}
/* Accessible keyboard states */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--n-primary);outline-offset:3px}
@media(max-width:370px){.page-body{padding-inline:14px}.app-header{padding-inline:14px}.compact-story{gap:7px}.thumb-link{width:76px;height:76px}.popular-thumb{width:60px;height:60px}.profile-id{gap:8px}.profile-photo{width:70px;height:70px}.read-cover{max-width:132px}.intro-copy h1{font-size:16px}.story-count{bottom:3px}}
@media(min-width:540px){body{background:#F1F1EF}.app-frame{box-shadow:0 8px 50px #132b2212}}
/* Authentication screens */
.auth-panel{padding-top:5vh;margin:0 auto;text-align:center}.auth-panel .auth-logo{height:125px;width:125px;display:grid;place-items:center;margin:12px auto 12px}.auth-logo img{width:100%;height:100%;object-fit:contain}.auth-panel h1{font-size:23px;margin:8px 0 14px}.auth-panel .hint{max-width:100%;margin-bottom:25px}.auth-panel form{text-align:right}.auth-panel form>label{font-size:13px}.auth-panel .primary{width:100%;margin-top:22px;padding:13px;border-radius:14px}.auth-panel .footnote{font-size:11px;margin-top:28px;color:var(--n-muted)}.auth-panel .auth-note{font-size:11px;color:var(--n-muted);text-align:right}.auth-panel .otp-phone{font-weight:800;font-size:19px;letter-spacing:2px}.auth-panel .edit-phone{display:inline-block;color:var(--n-primary);border-bottom:1px solid var(--n-primary);font-size:12px;margin:0 0 22px}.auth-panel .code-inputs{gap:9px}.auth-panel .code-inputs .digit{min-width:0;width:18%;font-size:22px;text-align:center;border-radius:13px;padding:15px 1px}